vue.js tutoriel d'introduction classe de liaison et styles de style

1. Préface

Je crois que tout le monde sait qu'une exigence courante pour la liaison de données est d'exploiter la liste d'éléments de classe et ses styles en ligne. Comme ce sont toutes des propriétés, 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é pour les classes et les styles. Outre les chaînes, le type de résultat d’une expression peut également être un objet ou un tableau.

2. Lier une classe HTML

Veuillez noter : bien que vous puissiez utiliser des balises Moustache pour lier des classes, telles que class="{{ className }}", nous ne le recommandons pas. La méthode d'écriture est mélangée 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
}

est rendu comme :

<div class="static class-a"></div>

lorsque isA et isB change, 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: {
 'class-a': true,
 'class-b': false
 }
}

Nous pouvons également lier un objet de retour ici Propriétés calculées. Il s’agit d’un modèle couramment utilisé et puissant.

Syntaxe du tableau

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

<div v-bind:class="[classA, classB]">

data: {
 classA: 'class-a',
 classB: 'class-b'
}

est rendu comme suit :

<div class="class-a class-b"></div>

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

<div v-bind:class="[classA, isB ? classB : &#39;&#39;]">

Cet exemple ajoute toujours la classeA, mais n'ajoute la classeB que lorsque isB est vrai.

2. Lier les styles en ligne

Syntaxe d'objet

La syntaxe d'objet de v-bind:style est très intuitive - ressemble beaucoup à CSS, c'est en fait 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: 'red',
 fontSize: 30
}

Il est généralement préférable de se lier directement à un objet de style. Rendre les modèles plus clairs :

<div v-bind:style="styleObject"></div>

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

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

3. Syntaxe du tableau

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

<div v-bind:style="[styleObjectA, styleObjectB]">

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.

4. Résumé

Ce qui précède est tout le contenu de la classe de liaison et des styles de style vue.js compilés pour vous. L'article le présente en détail et a, je l'espère, une certaine valeur de référence et d'apprentissage. cela sera utile à tout le monde. Apprendre vue.js peut être utile. L'éditeur continuera à mettre à jour les informations sur vue.js. Amis intéressés, veuillez continuer à prêter attention au site Web php chinois.

Pour plus d'articles liés au didacticiel d'introduction de vue.js sur les classes et les styles de liaison, veuillez faire attention au site Web PHP chinois !