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:
data() {
return {
attr: 'img.png',
}
}
Schreiben wir den Wert aus der Eigenschaft in
das Attribut src:
<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:
<template>
<img :src="attr">
</template>
Angenommen, in data sind ein Text
und eine Link-Adresse gespeichert:
data() {
return {
text: 'page',
href: 'page.html',
}
}
Erstellen Sie mit diesen Daten den folgenden Code:
<a href="page.html">page</a>
