VueJS-3-Tutorial: HTML-Attribute mit v-bind binden

Im vorigen Kapitel stand Text zwischen doppelten geschweiften Klammern. Diese Klammern funktionieren nur zwischen den Tags, nie in einem Attribut. Um ein Attribut an Daten zu binden, brauchst du eine Direktive: v-bind.

Das Produktbild

Unser Shop braucht ein Bild. Leg zwei Dateien in public/images/ ab: t-shirt-bleu.svg und t-shirt-rouge.svg. Alles, was in public/ liegt, wird unverändert im Wurzelverzeichnis der Website ausgeliefert, der Pfad im Code lautet deshalb /images/t-shirt-bleu.svg.

Ergänze eine Ref für den Bildpfad:

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
</script>

Was nicht funktioniert

Der erste Reflex ist, den Namen der Variablen in das Attribut zu schreiben:

<img src="image">

Der Browser sucht daraufhin eine Datei, die wörtlich image heißt, und zeigt ein kaputtes Bild. Das Attribut hat den String "image" bekommen, nicht den Wert der Variablen.

Der zweite Reflex sind die geschweiften Klammern:

<img src="{{ image }}">

Auch das funktioniert nicht. Vue interpoliert den Text von Knoten, keine Attribute.

v-bind

Die richtige Antwort ist die Direktive v-bind. Sie sagt Vue: „Der Inhalt dieses Attributs ist ein JavaScript-Ausdruck, werte ihn aus.“

<template>
  <div class="product-display">
    <div class="product-image">
      <img v-bind:src="image" v-bind:alt="product">
    </div>
    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>
  </div>
</template>

Das Bild erscheint, und das Attribut alt übernimmt den Produktnamen.

Die Kurzform mit Doppelpunkt

v-bind kommt so häufig vor, dass es eine Kurzform hat: den Doppelpunkt allein.

<img :src="image" :alt="product">

Beide Schreibweisen sind exakt gleichwertig. Die Kurzform findest du überall, auch in der offiziellen Dokumentation, sie kommt im weiteren Verlauf des Tutorials zum Einsatz.

Eine Bindung, keine Kopie

Die Bindung ist reaktiv und läuft in eine Richtung: von den Daten zum Template. Änderst du den Wert, zieht das Attribut nach.

const image = ref('/images/t-shirt-bleu.svg')

// später, beim Klick oder beim Hovern:
image.value = '/images/t-shirt-rouge.svg'   // das src des img ändert sich sofort

Genau diesen Mechanismus nutzt Kapitel 5, um das Bild beim Hovern über eine Farbe zu wechseln.

Was v-bind sonst noch kann

Jedes beliebige Attribut wird auf dieselbe Weise gebunden.

<a :href="http://lienProduit">Voir la fiche</a>
<button :disabled="enRupture">Ajouter au panier</button>
<div :class="classeCourante"></div>
<div :style="{ backgroundColor: couleur }"></div>
<input :value="nom">

Zwei Fälle verdienen eine Anmerkung.

Boolesche Attribute wie disabled folgen der HTML-Regel: Vue setzt das Attribut, wenn der Ausdruck wahr ist, und entfernt es vollständig, wenn er falsch ist. :disabled="false" ergibt einen aktiven Button, keinen Button mit disabled="false".

Die Attribute class und style werden gesondert behandelt: Sie nehmen auch Objekte und Arrays entgegen. Darum geht es in Kapitel 6.