vue.js notes d'étude style de liaison style et liste de classes

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.

1. Liez l'attribut Classe.

Lier les données à l'aide de la commande v-bind:, abrégée en :

Syntaxe :

. Les guillemets doubles après la classe acceptent un littéral d'objet/une référence d'objet/un tableau comme paramètre,

Ici, {active: isActive} est le paramètre d'objet, active est le nom de la classe et isActive est une valeur booléenne. Voici un exemple :

Lier un objet littéral

html :

<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
状态:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:&#39;#classBind&#39;,
data:{
isWarning:true,
alertList:[&#39;红色警报&#39;,&#39;警报解除&#39;],
alert:&#39;&#39;
},
computed:{
isSafe:function(){
return !this.isWarning;
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

css :

.warning{
color:#f24;
}
.safe{
color:#42b983;
}

Lorsque vous cliquez sur l'état Lors de l'écriture texte, vous pouvez changer le texte et la couleur suivants

//Statut : Alerte effacée vrai

//Statut : Alerte rouge fausse

Référence de l'objet lié

L'objet lié ici peut être écrit dans les données de l'instance Vue, et dans class="classObj", la classe entre guillemets doubles est une référence à l'objet classObj dans l'instance Vue. classObj peut être placé dans data ou calculé. S'il est calculé, la fonction correspondant à classObj doit renvoyer un objet comme suit :

js:

var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['红色警报','警报解除'],
alert:''
},
computed: {
isSafe: function () {
return !this.isWarning;
},
classObj:function(){
return {
warning: this.isWarning,
safe:this.isSafe
}
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

Tableau de liaison

html:

<div v-bind:class="classArray" @click="removeClass()">去掉class</div>

js

data: {
classArray:["big",'red']
}
methods:{
removeClass:function(){
　　this.classArray.pop();
}
}

css:

.big{
font-size:2rem;
}
.red{
color:red;
}

Effet, cliquez pour supprimer la classe, la fonction RemoveClass sera appelée pour supprimer le dernier élément du tableau classArray. Pour la première fois, supprimez « rouge », et la couleur de la police passera du rouge au noir. Cliquez à nouveau, supprimez. « grand », et la police deviendra plus petite.

2. Style de liaison en ligne

En ce moment, je regarde la documentation de l'API Vue à côté de cette page et je la vends ici, c'est tellement cool de montrer o( ^▽^. )o

html

<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+&#39;px&#39;}" @click="bigger">styleBind</span>
</div>

css

Cela ne nécessite pas de CSS. . .

js

var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
}
});

En plus de transmettre des littéraux d'objet, vous pouvez également transmettre des références d'objet et des tableaux à V-bind:style

Ce qui précède est le style de liaison et la classe des notes d'étude vue.js introduites par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus de notes d'étude sur vue.js, de styles de reliure et d'articles liés aux listes de classes, veuillez faire attention au site Web PHP chinois !