Arbeid med attributter i rammeverket Vue

Å sette inn verdier fra data kan gjøres ikke bare i tekst, men også i taggens attributter. Dette gjøres ved hjelp av direktivet v-bind.

La oss ved hjelp av dette direktivet sette verdien til attributtet src for taggen img. La den ønskede verdien lagres i egenskapen:

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

La oss skrive verdien fra egenskapen til attributtet src:

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

Vanligvis bruker alle den forkortede varianten av v-bind. Den representerer seg selv som bare et kolon foran attributtnavnet:

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

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

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