Trabajo con atributos en el framework Vue

Insertar valores de propiedades desde data no solo es posible en el texto, sino también en los atributos de las etiquetas. Esto se hace usando la directiva v-bind.

Usemos esta directiva para establecer el valor del atributo src para la etiqueta img. Dejemos que el valor deseado se almacene en la propiedad:

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

Escribamos el valor desde la propiedad en el atributo src:

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

Normalmente todos usan la forma abreviada de v-bind. Esta consiste simplemente en dos puntos antes del nombre del atributo:

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

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

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