Tutoriel VueJS 3 – Liaison des classes et des styles

class et style sont deux attributs particuliers : en plus des chaînes, v-bind y accepte des objets et des tableaux. C’est ce qui permet de refléter l’état de l’application dans l’apparence sans manipuler le DOM à la main.

Des pastilles de couleur

Remplaçons les mots « Bleu » et « Rouge » par des pastilles de la vraie couleur. Stockez d’abord un code hexadécimal plutôt qu’un nom :

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

Puis liez la couleur de fond :

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

Deux pastilles rondes apparaissent, une bleue et une rouge, et le survol change toujours l’image.

Camel case ou kebab case

L’objet passé à :style est un objet JavaScript. Les noms de propriétés CSS s’y écrivent donc en camel case :

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

Écrire background-color sans guillemets serait interprété comme une soustraction. Le kebab case reste possible entre guillemets :

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

Les deux formes produisent le même résultat. Choisissez-en une et tenez-vous-y.

Sortir le style du gabarit

Quand les propriétés se multiplient, le gabarit devient illisible. Déclarez l’objet dans le script :

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

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

Un tableau permet de combiner plusieurs objets, les derniers l’emportant sur les premiers :

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

Lier une classe

Passons au bouton. Quand le produit est en rupture, il doit être à la fois inactif et visiblement inactif.

Commencez par l’attribut disabled, lié comme au chapitre 2 :

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

Le bouton ne répond plus au clic, mais rien ne le montre. Ajoutez la classe grise, conditionnée de la même façon :

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

Dans l’objet passé à :class, la clé est le nom de la classe et la valeur la condition. Quand !inStock est vrai, la classe disabledButton est ajoutée, sinon elle est retirée.

class et :class coexistent

Le bouton porte à la fois class="button" et :class="{ … }". Vue ne les met pas en concurrence : il les fusionne.

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

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

Gardez les classes fixes dans class et les classes conditionnelles dans :class.

Plusieurs classes conditionnelles

L’objet accepte autant d’entrées que nécessaire :

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

Un nom de classe contenant un tiret doit être entre guillemets, pour la même raison que le kebab case des styles.

Choisir entre deux classes

L’objet ajoute ou retire une classe. Pour basculer entre deux classes, utilisez un ternaire dans un tableau :

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

Le tableau accepte aussi un mélange de chaînes et d’objets :

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

Où mettre le CSS

Un composant monofichier peut porter son propre style, isolé par l’attribut scoped :

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

Ces classes peuvent aussi être animées : c’est le sujet du chapitre sur les transitions.

Avec scoped, ces règles ne s’appliquent qu’aux éléments de ce composant : Vue ajoute un attribut unique aux balises et le reprend dans le sélecteur. C’est ce qui évite qu’une classe .button définie dans un composant en repeigne un autre.