Tutorial VueJS 3 – Enlace de atributos con v-bind
verificado el 2 septiembre 2026 · 3 min
Las dobles llaves no funcionan dentro de un atributo. Para enlazar un atributo a un dato, usa la directiva v-bind, o su atajo de dos puntos: :src="image". El enlace es reactivo y va del dato hacia la plantilla.
El capítulo anterior mostró texto entre dobles llaves. Esas llaves solo funcionan entre las etiquetas, nunca dentro de un atributo. Para enlazar un atributo a un dato hace falta una directiva: v-bind.
La imagen del producto
Nuestra tienda necesita una imagen. Coloca dos ficheros en public/images/: t-shirt-bleu.svg y t-shirt-rouge.svg. Todo lo que está en public/ se sirve tal cual en la raíz del sitio, así que la ruta en el código será /images/t-shirt-bleu.svg.
Añade una referencia para la ruta de la imagen:
<script setup>
import { ref } from 'vue'
const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
</script>Lo que no funciona
Primer reflejo: escribir el nombre de la variable en el atributo.
<img src="image">El navegador busca entonces un fichero llamado literalmente image y muestra una imagen rota. El atributo ha recibido la cadena "image", no el valor de la variable.
Segundo reflejo: las llaves.
<img src="{{ image }}">Tampoco funciona. Vue interpola el texto de los nodos, no los atributos.
v-bind
La respuesta correcta es la directiva v-bind. Le dice a Vue: «el contenido de este atributo es una expresión JavaScript, evalúala».
<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>La imagen aparece, y el atributo alt recoge el nombre del producto.
El atajo de los dos puntos
v-bind es tan habitual que tiene una forma corta: los dos puntos a secas.
<img :src="image" :alt="product">Las dos escrituras son estrictamente equivalentes. La forma corta es la que se ve en todas partes, incluida la documentación oficial, es la que usaremos en el resto del tutorial.
Un enlace, no una copia
El enlace es reactivo y va en un solo sentido: del dato hacia la plantilla. Si cambias el valor, el atributo lo sigue.
const image = ref('/images/t-shirt-bleu.svg')
// más adelante, al hacer clic o al pasar el ratón:
image.value = '/images/t-shirt-rouge.svg' // el src de la img cambia al instanteEs el mecanismo que el capítulo 5 usará para cambiar la imagen al pasar el ratón por un color.
Qué más sabe hacer v-bind
Cualquier atributo se enlaza de la misma forma.
<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">Hay dos casos que merecen una nota.
Los atributos booleanos como disabled siguen la regla del HTML: Vue añade el atributo si la expresión es verdadera y lo quita del todo si es falsa. Escribir :disabled="false" produce un botón activo, no un botón con disabled="false".
Los atributos class y style reciben un trato especial: aceptan además objetos y arrays. Es el tema del capítulo 6.
No cambia nada. v-bind y su atajo se escriben igual: es una directiva de plantilla, independiente del estilo de escritura del script.
lienFiche y un enlace <a> cuyo href esté enlazado a él. Después enlaza el atributo title de la imagen al nombre del producto.Errores frecuentes
:src="image".src="{{ image }}" no funciona: la interpolación solo se aplica al texto entre las etiquetas.