Bindungsstil und Klassenliste von vue.js

Eine häufige Anforderung für die Datenbindung ist die Manipulation der Klassenliste eines Elements und seiner Inline-Stile. Da es sich bei allen um Attribute handelt, können wir sie mit v-bind verarbeiten: Wir müssen lediglich die endgültige Zeichenfolge des Ausdrucks auswerten. Die Verkettung von Zeichenfolgen ist jedoch umständlich und fehleranfällig. Daher verbessert Vue.js v-bind speziell, wenn es mit Klassen und Stilen verwendet wird. Der Ergebnistyp eines Ausdrucks kann neben Strings auch ein Objekt oder ein Array sein.

1. Binden Sie das Klassenattribut.

Binden Sie Daten mit dem Befehl v-bind:, abgekürzt als:

Syntax: e46ddcb875112b0f8e33ef725095c7c416b28748ea4df4d9c2150843fecfba68 . Die doppelten Anführungszeichen nach der Klasse akzeptieren ein Objektliteral/eine Objektreferenz/ein Array als Parameter.

Hier ist {active: isActive} der Objektparameter, active der Klassenname und isActive ein boolescher Wert. Hier ist ein Beispiel:

Objektliteral binden

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

Wenn Sie auf den Statustext klicken, können Sie den folgenden Text und die folgende Farbe ändern

//Status: Warnung gelöscht, wahr

//Status: roter Alarm falsch

Gebundene Objektreferenz

Das gebundene Objekt hier kann in die Daten der Vue-Instanz geschrieben werden und in class="classObj ", double Anführungszeichen Die Klasse in ist eine Referenz auf das classObj-Objekt in der Vue-Instanz. classObj kann in Daten platziert oder berechnet werden. Wenn es in berechnet ist, muss die Funktion, die classObj entspricht, ein Objekt wie folgt zurückgeben:

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

Gebundenes Array

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

Effekt, klicken Sie, um die Klasse zu entfernen. Die Funktion „removeClass“ wird aufgerufen, um das letzte Element zu entfernen des classArray-Arrays Entfernen Sie für das erste Element „Rot“, und die Schriftfarbe ändert sich von Rot zu Schwarz. Klicken Sie erneut, entfernen Sie „Groß“, und die Schrift wird kleiner.

2. Bindungs-Inline-Stil

Im Moment schaue ich mir die Vue-API-Dokumentation neben dieser Seite an und verkaufe sie hier. Es fühlt sich so cool an, o( ^▽^ )o

html

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

css

Hierfür ist kein CSS erforderlich. . .

js

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

Zusätzlich zur Übergabe von Objektliteralen können Sie auch Objektreferenzen und Arrays an V-bind übergeben: Stil