Tutorial VueJS 3 – classi e stili dinamici con v-bind

class e style sono due attributi particolari: oltre alle stringhe, v-bind ci accetta oggetti e array. È quello che permette di riflettere lo stato dell’applicazione nel suo aspetto senza manipolare il DOM a mano.

Pallini colorati

Sostituiamo le parole «Bleu» e «Rouge» con pallini del colore vero. Memorizza prima un codice esadecimale invece di un nome:

<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>

Poi lega il colore di sfondo:

<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>

Compaiono due pallini rotondi, uno blu e uno rosso, e il passaggio del mouse continua a cambiare l’immagine.

Camel case o kebab case

L’oggetto passato a :style è un oggetto JavaScript. I nomi delle proprietà CSS si scrivono quindi in camel case:

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

Scrivere background-color senza virgolette verrebbe interpretato come una sottrazione. Il kebab case resta possibile tra virgolette:

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

Le due forme danno lo stesso risultato. Scegline una e restaci fedele.

Portare lo stile fuori dal template

Quando le proprietà si moltiplicano, il template diventa illeggibile. Dichiara l’oggetto nello script:

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

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

Un array permette di combinare più oggetti, e gli ultimi hanno la meglio sui primi:

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

Legare una classe

Passiamo al pulsante. Quando il prodotto è esaurito, deve essere allo stesso tempo inattivo e visibilmente inattivo.

Comincia dall’attributo disabled, legato come nel capitolo 2:

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

Il pulsante non risponde più al clic, ma niente lo fa vedere. Aggiungi la classe grigia, condizionata allo stesso modo:

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

Nell’oggetto passato a :class, la chiave è il nome della classe e il valore è la condizione. Quando !inStock è vero, la classe disabledButton viene aggiunta, altrimenti viene tolta.

class e :class convivono

Il pulsante porta sia class="button" sia :class="{ … }". Vue non li mette in concorrenza: li fonde.

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

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

Tieni le classi fisse in class e quelle condizionali in :class.

Più classi condizionali

L’oggetto accetta tutte le voci che ti servono:

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

Un nome di classe che contiene un trattino va messo tra virgolette, per lo stesso motivo del kebab case negli stili.

Scegliere tra due classi

L’oggetto aggiunge o toglie una classe. Per alternare due classi, usa un ternario dentro un array:

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

L’array accetta anche un misto di stringhe e di oggetti:

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

Dove mettere il CSS

Un componente single-file può portare il proprio stile, isolato dall’attributo scoped:

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

Queste classi possono anche essere animate: è l’argomento del capitolo sulle transizioni.

Con scoped, queste regole si applicano solo agli elementi di questo componente: Vue aggiunge un attributo unico ai tag e lo riprende nel selettore. È così che una classe .button definita in un componente non va a ridipingerne un altro.