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 :

4a0820b0f8ccac8a74c1d5d12ef47aac16b28748ea4df4d9c2150843fecfba68

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 ：

95d66a4b96383bd3e82abe8c8e40596f16b28748ea4df4d9c2150843fecfba68

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

19de9f32bc61168916c704eb219bf5b9

Cet exemple ajoute toujours classA, mais seulement lorsque isB est vrai Ajouter classeB.

Cependant, écrire de cette façon est un peu fastidieux lorsqu'il existe plusieurs classes conditionnelles. Dans la version 1.0.19, la syntaxe des objets peut être utilisée dans la syntaxe des tableaux :

5e8eb295b79d324df5d621d3d0eaa446

Style en ligne de liaison

Syntaxe d'objet

La syntaxe d'objet de v-bind:style est très intuitive - elle ressemble beaucoup à CSS, mais il s'agit en fait d'un objet JavaScript. Les noms de propriétés CSS peuvent être nommés en camelCase ou kebab-case :

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

Il est généralement préférable de se lier directement à un objet de style pour rendre le modèle plus clair :

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

De même, la syntaxe des objets est souvent utilisée en conjonction avec des propriétés calculées qui renvoient des objets.

Syntaxe du tableau

La syntaxe du tableau de v-bind:style peut appliquer plusieurs objets de style à un élément :

565466c4c2eadce5aff3b05147207428

Ajouter automatiquement un préfixe

Lorsque v-bind:style utilise des propriétés CSS qui nécessitent des préfixes de fournisseur, telles que transform, Vue.js détectera et ajoutera automatiquement le préfixe correspondant .

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde s'abonnera au site Web PHP chinois.

Pour plus d'articles liés à la liaison de classe et de style que vous devez apprendre chaque jour dans Vue.js, veuillez faire attention au site Web PHP chinois !