Arbeit mit Attributen im Vue-Framework

Man kann die Werte von Eigenschaften aus data nicht nur in Text, sondern auch in Attribute von Tags einfügen. Dies geschieht mit der Direktive v-bind.

Lassen Sie uns mit dieser Direktive den Wert des Attributs src für den Tag img setzen. Der gewünschte Wert soll in der Eigenschaft gespeichert sein:

App.vuedata() {
  return {
    attr: 'img.png',
  }
}

Schreiben wir den Wert aus der Eigenschaft in das Attribut src:

App.vue<template>
  <img v-bind:src="attr">
</template>

Normalerweise verwendet jeder die abgekürzte Variante von v-bind. Sie stellt einfach einen Doppelpunkt vor dem Attributnamen dar:

App.vue<template>
  <img :src="attr">
</template>

App.vuedata() {
  return {
    text: 'page',
    href: 'page.html',
  }
}

html<a href="page.html">page</a>