Werken met attributen in het Vue-framework

Waarden van eigenschappen uit data kunnen niet alleen in tekst worden geplaatst, maar ook in attributen van tags. Dit wordt gedaan met de directive v-bind.

Laten we met behulp van deze directive de waarde van het attribuut src voor de tag img instellen. Laat de gewenste waarde opgeslagen zijn in de eigenschap:

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

Laten we de waarde uit de eigenschap in het attribuut src schrijven:

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

Meestal gebruikt iedereen de verkorte versie van v-bind. Het wordt voorgesteld door simpelweg een dubbele punt voor de attribuutnaam:

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

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

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