Bindungsstil und Klassenliste der vue.js-Lernnotizen

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:

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

Beim Anklicken Status Beim Schreiben Text, Sie können den folgenden Text und die folgende Farbe ändern

//Status: Alarm gelöscht, wahr

//Status: Roter Alarm, falsch

Gebundene Objektreferenz

Das hier gebundene Objekt kann in die Daten der Vue-Instanz geschrieben werden, und in class="classObj" ist die Klasse in doppelten Anführungszeichen ein Verweis 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];
}
}
});

Binding 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 des classArray-Arrays zu entfernen. Entfernen Sie zum ersten Mal „Rot“ und die Schriftfarbe ändert sich von Rot zu Schwarz. Klicken Sie erneut, „Entfernen“. „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:style übergeben

Das Obige ist der vom Herausgeber eingeführte Bindungsstil und die Klasse der vue.js-Studiennotizen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Studiennotizen zu vue.js, Bindungsstilstile und Artikel zu Klassenlisten finden Sie auf der chinesischen PHP-Website!