v-bind y clase reactiva en Vue.js

Aprende a dominar atributos dinámicos en Vue.js con confianza: enlaza HTML a datos reactivos con v-bind, usa el atajo : para escribir menos y aplica clases y estilos que respondan al estado de tu aplicación. Además, aprovecha expresiones de JavaScript para transformar valores, por ejemplo convertir un string a upper case en tiempo real.

¿Cómo enlazar atributos dinámicos con v-bind en Vue.js?

Con v-bind:atributo conectas un atributo HTML a una parte de tu data. Así, un img puede obtener su src desde product.images[0].image y el alt desde product.name, incluso aplicando transformaciones con expresiones de JavaScript.

<!-- Imagen principal: primera del arreglo -->
<img
  v-bind:src="product.images[0].image"
  v-bind:alt="product.name.toUpperCase()"
>

• Conecta src a product.images[0].image para mostrar la primera imagen.
• Vuelve reactivo alt con product.name y transforma a upper case con una expresión.
• Las expresiones en atributos son de JavaScript: se evalúan al vuelo.
• Al refrescar, verás la imagen y el alt actualizados según la data.

¿Qué atajo simplifica v-bind en atributos como alt?

Vue ofrece un atajo para v-bind: reemplaza v-bind:atributo por :atributo. Es equivalente y más conciso. Ideal cuando tienes muchos atributos dinámicos.

<!-- Misma lógica usando el atajo : -->
<img
  :src="product.images[1].image"  
  :alt="product.name"
>

• :alt equivale a v-bind:alt.
• :src enlaza la segunda imagen con product.images[1].image.
• Úsalo en todos los atributos que deban reaccionar a la data.

¿Cómo aplicar clases y estilos reactivos con v-bind:class y v-bind:style?

En Vue, los atributos class y style se tratan de forma especial: puedes pasar objetos. En class, cada clave es un nombre de clase y su valor es un booleano que decide si se aplica. En style, cada clave es una propiedad CSS y su valor el estilo reactivo.

¿Cómo activar una clase con un booleano?

<!-- Dos thumbnails; el activo depende de activeImage -->
<li :class="{ active: activeImage === 0 }"></li>
<li :class="{ active: activeImage === 1 }"></li>

• Define en la data activeImage = 0 para iniciar con el primero activo.
• La clase active se agrega cuando la expresión es verdadera.
• Cambiar activeImage = 1 mueve la clase al segundo thumbnail.

¿Cómo definir un background image dinámico en thumbnails?

<!-- Estilo reactivo con background-image -->
<li
  :class="{ active: activeImage === 0 }"
  :style="{ backgroundImage: 'url(' + product.images[0].thumbnail + ')' }"
></li>
<li
  :class="{ active: activeImage === 1 }"
  :style="{ backgroundImage: 'url(' + product.images[1].thumbnail + ')' }"
></li>

• Pasa un objeto a style: { backgroundImage: valor }.
• Construye la URL con concatenación para el background image.
• Replica el patrón para cada thumbnail cambiando el índice.
• Verás cómo la clase active y el fondo reaccionan al estado.

¿Te gustaría profundizar en más atributos reactivos o variaciones de thumbnails? Cuéntame tu caso en los comentarios y lo trabajamos juntos.