Vue 3-tutorial: attributen binden aan data met v-bind
geverifieerd op 2 september 2026 · 3 min
Dubbele accolades werken niet in een attribuut. Om een attribuut aan data te binden gebruik je de directive v-bind, of de korte vorm met dubbele punt: :src="image". De binding is reactief en loopt van de data naar de template.
In het vorige hoofdstuk verscheen tekst tussen dubbele accolades. Die accolades werken alleen tussen de tags, nooit in een attribuut. Om een attribuut aan data te binden heb je een directive nodig: v-bind.
De afbeelding van het product
Onze webshop heeft een afbeelding nodig. Zet twee bestanden in public/images/: t-shirt-bleu.svg en t-shirt-rouge.svg. Alles wat in public/ staat, wordt onveranderd vanaf de root van de site geserveerd, dus het pad in de code wordt /images/t-shirt-bleu.svg.
Voeg een ref toe voor het pad van de afbeelding:
<script setup>
import { ref } from 'vue'
const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
</script>Wat niet werkt
De eerste reflex is de naam van de variabele in het attribuut zetten:
<img src="image">De browser zoekt dan naar een bestand dat letterlijk image heet, en toont een gebroken afbeelding. Het attribuut heeft de string "image" gekregen, niet de waarde van de variabele.
De tweede reflex zijn de accolades:
<img src="{{ image }}">Dat werkt evenmin. Vue interpoleert de tekst van nodes, niet de attributen.
v-bind
Het juiste antwoord is de directive v-bind. Die zegt tegen Vue: ‘de inhoud van dit attribuut is een JavaScript-expressie, evalueer die’.
<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>De afbeelding verschijnt, en het attribuut alt neemt de naam van het product over.
De korte vorm met dubbele punt
v-bind komt zo vaak voor dat er een korte vorm voor bestaat: alleen de dubbele punt.
<img :src="image" :alt="product">Beide schrijfwijzen zijn strikt gelijkwaardig. De korte vorm kom je overal tegen, ook in de officiële documentatie, die gebruiken we in de rest van deze tutorial.
Een binding, geen kopie
De binding is reactief en gaat maar één kant op: van de data naar de template. Verander je de waarde, dan volgt het attribuut.
const image = ref('/images/t-shirt-bleu.svg')
// later, bij een klik of bij hover:
image.value = '/images/t-shirt-rouge.svg' // de src van de img verandert meteenDat mechanisme gebruikt hoofdstuk 5 om de afbeelding te wisselen zodra je over een kleur zweeft.
Wat v-bind nog meer kan
Elk willekeurig attribuut bind je op dezelfde manier.
<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">Twee gevallen verdienen een kanttekening.
De booleaanse attributen zoals disabled volgen de HTML-regel: Vue zet het attribuut erop als de expressie waar is en haalt het volledig weg als ze onwaar is. :disabled="false" levert een actieve knop op, geen knop met disabled="false".
De attributen class en style krijgen een aparte behandeling: ze accepteren ook objecten en arrays. Dat is het onderwerp van hoofdstuk 6.
Er verandert niets. v-bind en de korte vorm schrijf je precies hetzelfde: het is een template-directive, los van de schrijfstijl van het script.
lienFiche toe en een link <a> waarvan de href eraan gebonden is. Bind daarna het attribuut title van de afbeelding aan de naam van het product.Veelgemaakte fouten
:src="image" zijn.src="{{ image }}" werkt niet: de interpolatie geldt alleen voor tekst tussen de tags.