Vue3 directiva v-bind
Directivas integradas de Vue3v-bindLa directiva se utiliza para enlazar dinámicamente atributos o props de componentes, permitiendo que los valores de los atributos respondan a los cambios de datos.
Explicación básica
v-bindLa directiva se utiliza para enlazar dinámicamente uno o más atributos a una expresión. Permite que el valor de los atributos sea dinámico, en lugar de una cadena fija.
- Abreviatura: : o . (cuando es modificador de prop)
- Tipo esperado: any (con argumento) | Object (sin argumento)
- Función: Enlazar dinámicamente atributos o props.
Uso básico
Ejemplo
<!-- Escritura completa -->
<img v-bind:src="imageSrc" />
<!-- Abreviatura -->
<img :src="imageSrc" />
<img v-bind:src="imageSrc" />
<!-- Abreviatura -->
<img :src="imageSrc" />
Ejemplo
<template>
<div>
<img :src="currentImage" :alt="imageAlt" />
<button @click="changeImage">Cambiar imagen</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Imagen de paisaje'
}
},
methods: {
changeImage() {
this.currentImage = this.currentImage === '/images/photo1.jpg'
? '/images/photo2.jpg'
: '/images/photo1.jpg'
}
}
}
</script>
<div>
<img :src="currentImage" :alt="imageAlt" />
<button @click="changeImage">Cambiar imagen</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Imagen de paisaje'
}
},
methods: {
changeImage() {
this.currentImage = this.currentImage === '/images/photo1.jpg'
? '/images/photo2.jpg'
: '/images/photo1.jpg'
}
}
}
</script>
Enlace dinámico de class y style
Ejemplo
<!-- Enlace dinámico de class -->
<div :class="{ active: isActive }">Contenido</div>
<!-- Enlace dinámico de style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Estilo</div>
<div :class="{ active: isActive }">Contenido</div>
<!-- Enlace dinámico de style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Estilo</div>
Otras extensiones