Tutorial VueJS 3 – Enlazar clases y estilos

class y style son dos atributos especiales: además de cadenas, v-bind acepta en ellos objetos y arrays. Es lo que permite reflejar el estado de la aplicación en su apariencia sin tocar el DOM a mano.

Círculos de color

Vamos a sustituir las palabras «Bleu» y «Rouge» por círculos del color real. Guarda primero un código hexadecimal en lugar de un nombre:

<script setup>
const variants = ref([
  { id: 2234, color: '#2563eb', image: '/images/t-shirt-bleu.svg' },
  { id: 2235, color: '#dc2626', image: '/images/t-shirt-rouge.svg' }
])
</script>

Después enlaza el color de fondo:

<div class="variants-wrapper">
  <div
    v-for="variant in variants"
    :key="variant.id"
    class="color-circle"
    :style="{ backgroundColor: variant.color }"
    @mouseover="updateImage(variant.image)"
  ></div>
</div>

Aparecen dos círculos, uno azul y otro rojo, y pasar el ratón por encima sigue cambiando la imagen.

Camel case o kebab case

El objeto que se pasa a :style es un objeto JavaScript. Los nombres de las propiedades CSS se escriben, por tanto, en camel case:

<div :style="{ backgroundColor: variant.color }"></div>

Escribir background-color sin comillas se interpretaría como una resta. El kebab case sigue siendo posible entre comillas:

<div :style="{ 'background-color': variant.color }"></div>

Las dos formas dan el mismo resultado. Elige una y mantente en ella.

Sacar el estilo de la plantilla

En cuanto se acumulan las propiedades, la plantilla se vuelve ilegible. Declara el objeto en el script:

<script setup>
const styleTitre = ref({
  color: '#111827',
  fontSize: '28px',
  fontWeight: '700'
})
</script>

<template>
  <h1 :style="styleTitre">{{ product }}</h1>
</template>

Un array permite combinar varios objetos, y los últimos ganan a los primeros:

<div :style="[styleBase, styleSurcharge]"></div>

Enlazar una clase

Pasemos al botón. Cuando el producto está agotado, tiene que estar a la vez deshabilitado y visiblemente deshabilitado.

Empieza por el atributo disabled, enlazado como en el capítulo 2:

<button class="button" :disabled="!inStock" @click="addToCart">
  Ajouter au panier
</button>

El botón ya no responde al clic, pero nada lo indica. Añade la clase gris, con la misma condición:

<button
  class="button"
  :class="{ disabledButton: !inStock }"
  :disabled="!inStock"
  @click="addToCart"
>
  Ajouter au panier
</button>

En el objeto que se pasa a :class, la clave es el nombre de la clase y el valor es la condición. Cuando !inStock es verdadero, se añade la clase disabledButton, si no, se quita.

class y :class conviven

El botón lleva a la vez class="button" y :class="{ … }". Vue no los enfrenta: los fusiona.

<!-- écrit dans le gabarit -->
<button class="button" :class="{ disabledButton: true }">

<!-- rendu dans la page -->
<button class="button disabledButton">

Deja las clases fijas en class y las condicionales en :class.

Varias clases condicionales

El objeto admite tantas entradas como necesites:

<div :class="{ actif: estActif, 'en-erreur': aUneErreur, masque: !visible }"></div>

Un nombre de clase con un guion tiene que ir entre comillas, por la misma razón que el kebab case de los estilos.

Elegir entre dos clases

El objeto añade o quita una clase. Para alternar entre dos clases, usa un ternario dentro de un array:

<div :class="[inStock ? 'enStock' : 'enRupture']"></div>

El array admite también una mezcla de cadenas y de objetos:

<div :class="['color-circle', { selectionne: index === selectedVariant }]"></div>

Dónde poner el CSS

Un componente monofichero puede llevar su propio estilo, aislado por el atributo scoped:

<style scoped>
.color-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
</style>

Estas clases también se pueden animar: es el tema del capítulo sobre las transiciones.

Con scoped, esas reglas solo se aplican a los elementos de ese componente: Vue añade un atributo único a las etiquetas y lo repite en el selector. Es lo que evita que una clase .button definida en un componente repinte otro.