1. Préface
Je crois que tout le monde sait qu'une exigence commune pour la liaison des données est la liste de classe des éléments d'opération et son style en ligne. Puisqu'ils sont toutes des propriétés, nous pouvons les gérer avec v-bind : nous avons juste besoin de calculer la chaîne finale de l'expression. Cependant, l'épissage des cordes est gênant et facile à faire des erreurs. Vue.js l'améliore donc spécifiquement lorsque v-bind est utilisé pour la classe et le style. Le type de résultat d'une expression peut être un objet ou un tableau en plus d'une chaîne.
2. Bind Html Class
Veuillez noter: bien que vous puissiez utiliser la balise Mustache pour lier la classe, telle que class="{{ className }}" , nous ne recommandons pas cette méthode d'écriture et v-bind:class . Un seul des deux peut être choisi!
Syntaxe d'objet
Nous pouvons transmettre un objet à v-bind:class pour changer de classe dynamiquement. Notez que v-bind:class peut coexister avec les caractéristiques de classe ordinaires:
<div V-Bind: class = "{'class-a': Isa, 'class-b': isb}"> </div> Données: {Isa: True, ISB: FAUX}Rendu comme:
<div> </div>
Lorsque ISA et ISB changent, la liste des classes sera mise à jour en conséquence. Par exemple, si ISB devient vrai, la liste des classes deviendra " static class-a class-b ".
Vous pouvez également lier directement un objet dans les données:
<div v-bider: class = "classObject"> </div>
data: {classObject: {'class-a': true, 'class-b': false}}Nous pouvons également lier une propriété calculée qui renvoie l'objet ici. Il s'agit d'un mode couramment utilisé et puissant.
Syntaxe de la table
Nous pouvons transmettre un tableau à v-bind:class pour appliquer une liste de classe:
<div v-bider: class = "[classa, classb]">
Données: {Classa: 'class-a', classb: 'class-b'}Rendu comme:
<div> </div>
Si vous souhaitez également basculer la classe dans la liste en fonction des conditions, vous pouvez utiliser une expression ternaire:
<div v-bind: class = "[classa, isb? classb: '']">
Cet exemple ajoute toujours Classa, mais ClassB uniquement si ISB est vrai.
2. Bind Styles en ligne
Syntaxe d'objet
La syntaxe d'objet de v-bind:style est très intuitive - elle ressemble beaucoup à CSS, mais c'est en fait un objet JavaScript. Les noms d'attribut CSS peuvent être nommés par CamelCase ou une courte séparation horizontale (case-kebab):
<div V-Bind: Style = "{Color: activeColor, FonTSize: FonTSize + 'PX'}"> </div> Données: {activeColor: 'Red', Fontize: 30}Il est généralement préférable de se lier directement à un objet de style, ce qui rend le modèle plus clair:
<div v-bider: style = "styleObject"> </div>
Données: {StyleObject: {Color: 'Red', Fontize: '13px'}}De même, la syntaxe des objets est souvent utilisée en conjonction avec les propriétés calculées de l'objet retourné.
3. Syntaxe du tableau
v-bind:style peut appliquer plusieurs objets de style à un élément:
<div v-bider: style = "[styleobjecta, styleobjectb]">
Ajouter automatiquement les préfixes
Lorsque v-bind:style utilise des attributs CSS qui nécessitent des préfixes de fournisseurs, tels que Transform, Vue.js détectera automatiquement et ajoutera le préfixe correspondant.
4. Résumé
Ce qui précède est l'intégralité du contenu de la classe de liaison Vue.js et des styles de style compilés pour vous. L'article est introduit en détail et a une certaine valeur d'apprentissage de référence. J'espère qu'il sera utile à tout le monde d'apprendre Vue.js. L'éditeur mettra également à jour des informations sur Vue.js l'une après l'autre. Amis intéressés, veuillez continuer à faire attention à wulin.com.