Liaison de classe et de style que vous devez apprendre chaque jour dans Vue.js

Une exigence courante pour la liaison de données est de manipuler la liste de classes d'un élément et ses styles en ligne. Comme ce sont tous des attributs, nous pouvons utiliser v-bind pour les gérer : il nous suffit d'évaluer la chaîne finale de l'expression. Cependant, la concaténation de chaînes est fastidieuse et sujette aux erreurs. Par conséquent, Vue.js améliore spécifiquement v-bind lorsqu'il est utilisé avec des classes et des styles. Outre les chaînes, le type de résultat d’une expression peut également être un objet ou un tableau.

Liaison de classe HTML

Bien que vous puissiez utiliser des balises Moustache pour lier des classes, telles que `{% raw %}class=”{{ className }}”{% endraw %}`, mais nous Il n'est pas recommandé de mélanger cette méthode d'écriture avec `v-bind:class`. Vous ne pouvez choisir qu’un des deux !

Syntaxe des objets

Nous pouvons transmettre à v-bind:class un objet pour changer dynamiquement de classe. Notez que la directive v-bind:class peut coexister avec l'attribut class normal :

<div class="static" v-bind:class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB }"></div>
 
data: {
 isA: true,
 isB: false
}

s'affiche sous la forme :

Lorsque isA et isB changent, la liste des classes sera mise à jour en conséquence. Par exemple, si isB devient vrai, la liste de classes devient « classe statique-a classe-b ».

Vous pouvez également lier directement un objet dans les données :

<div v-bind:class="classObject"></div>
 
data: {
 classObject: {
 &#39;class-a&#39;: true,
 &#39;class-b&#39;: false
 }
}

Nous pouvons également lier ici une propriété calculée de l'objet renvoyé. Il s’agit d’un modèle couramment utilisé et puissant.

Syntaxe du tableau

Nous pouvons transmettre un tableau à v-bind:class pour appliquer une liste de classes :

<div v-bind:class="[classA, classB]">
 
data: {
 classA: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}

Rendu comme ：

Si vous souhaitez également changer de classe dans la liste en fonction de conditions, vous pouvez utiliser une expression ternaire Formule :

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>
 
data: {
 activeColor: &#39;red&#39;,
 fontSize: 30
}

<div v-bind:style="styleObject"></div>
 
data: {
 styleObject: {
 color: &#39;red&#39;,
 fontSize: &#39;13px&#39;
 }
}