Liaison de classe et de style que vous devez apprendre chaque jour dans Vue.js-js tutoriel-php.cn

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
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Rendu comme ：

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

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 :

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
}

Copier après la connexion

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

Copier après la connexion

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 :

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 !

Étiquettes associées：

Vue.js Class 样式绑定

source：php.cn

Article précédent：Vue.js doit apprendre chaque jour la liaison de données bidirectionnelle Article suivant：vue.js tutoriel d'introduction classe de liaison et styles de style

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur