Objet avec classes CSS dans Vue
Les classes CSS peuvent également être stockées dans
des objets. Dans ce cas, les noms des classes
sont les clés de l'objet, et les éléments
de l'objet sont des valeurs booléennes.
Si la valeur est true,
alors la classe sera ajoutée à l'élément,
et si c'est false, alors elle ne le sera pas.
Essayons en pratique. Supposons que nous ayons l'objet suivant avec des classes :
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Lions cet objet à une balise :
<template>
<p :class="obj">text</p>
</template>
On donne l'objet suivant avec des classes CSS :
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Appliquez ces classes à une balise quelconque. Vérifiez quelles classes ont été appliquées, et lesquelles ne l'ont pas été.
