Classes CSS dynamiques

Classes CSS dynamiques :class

Il est fréquent qu'une classe css doit-être ajoutée ou retirée à un élément HTML afin de changer son apparence pour refléter une action commise par un usager.

Pour ce faire, Vue permet de passer un objet JavaScript {} à un l'attribut dynamique v-bind:class ou :class sur la balise.
Cet objet doit contenir une propriété correspondant au nom de la classe souhaitée et comme valeur une donnée ou encore une expression. Ainsi si la condition suivie des : retourne true, la classe est ajoutée. Et à l'opposé, si elle est évaluée à false elle est retirée.

Voici un exemple où est ajoutée la classe .majority à une carte d'une personne lorsque la donnée age est plus grande ou égale à 18:

<img :class="{ majority : age >= 18 }" src="url-vers-image-del-a-personne.png"> img{ border: 1px solid gray; } img.majority{ border: 3px solid purple; }

Voici un exemple où est ajoutée la classe .disabled au bouton que lorsque la donnée isDisabled est équivalente à true:

<button :class="{ disabled : isDisabled }"></button> button { background-color: var(--primary-color); } button.disabled { background-color: gray; cursor: not-allowed; }

Autre exemple, pour ajouter la classe .orange lorsque la donnée isOrange est équivalente à true:

<img :src="picture" :class="{orange: isOrange}">
Veuillez inspecter à la fois le HMTL et le JS dans le CodePen pour mieux comprendre la dynamique.

Nom de classe contenant des caractères spéciaux

Si un nom de classe CSS contient des caractères spéciaux, il sera nécessaire de l'entourer de guillemets.

Par exemple, une classe avec un trait d'union:

<img :src="picture" :class="{'is-orange': isOrange}"> En cas de doute, il est possible de toujours utiliser des guillemets, même si aucun caractère spécial n’est présent. Multiple classes dynamiques

Puisqu'un objet JavaScript {} est utilisé, il est possible d'ajouter plusieurs classes CSS dynamiques simplement en les séparant par une virgule.

Par exemple:

<img :src="picture" :class="{orange: isOrange, big: isBig}"> . Combinaison avec des classes statiques

Si certaines classes doivent être statiques (ne jamais changer), alors que certaines doivent être dynamiques (pouvoir changer), il est nécessaire d'utiliser deux attributs class.
Un 1^er nommé simplement class="" pour les classes statiques et un 2^e avec sans v-bind:class="" ou :class="" pour les classes dynamiques. Ces deux attributs seront ensuite combinés par Vue.

Par exemple:

produira le code suivant si la valeur de isOrange est true:

pu produira le code suivant si la valeur de isOrange est false:

<img src="willy-wonka-square.jpg" class="media">

Class & Style Bindings

Exercice

EXERCICE Vue - Collection de films:Part 1 [Classes dynamiques] Vous devez créer une petite application web vous permettant de classer votre collection de films, à voir ou déjà vu.