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. Parce que ce sont tous des attributs, nous pouvons les gérer avec Vind V: il suffit de calculer la chaîne finale de l'expression. Cependant, l'épissage des cordes est gênant et facile à faire des erreurs. Par conséquent, Vue.js l'améliore 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.
Lier la classe HTML
Bien que vous puissiez utiliser la balise Moustache pour lier la classe, telle que `{% brut%} class =" {{className}} "{% endraw%}`, nous ne recommandons pas cette méthode d'écriture et `v-bider: 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 la directive V-Bind: Class peut coexister avec les caractéristiques de classe ordinaires:
<div V-Bind: class = "{'class-a': isa, 'class-b': isb}"> </div> data: {Isa: true, isb: false}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 "Statique Class-A Class-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 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-Bind: class = "[classa, classb]"> data: {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.
Cependant, l'écriture de cette façon est un peu lourde lorsqu'il existe plusieurs classes conditionnelles. Dans 1.0.19+, la syntaxe d'objet peut être utilisée dans la syntaxe du tableau:
<div v-bind: class = "[classa, {classb: isb, classc: isc}]">
Lier les 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> Data: {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-Bind: style = "styleObject"> </div> Data: {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é.
Syntaxe de la table
Vind V: La syntaxe du tableau de 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.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Pour plus de tutoriels d'apprentissage Vue, veuillez lire le sujet spécial "Vue Practical Tutorial"
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.