Eine häufige Anforderung für die Datenbindung ist die Manipulation der Klassenliste eines Elements und seiner Inline-Stile. Da es sich bei beiden 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.
Verwenden Sie v-bind:class oder :class, um Stil oder Klasse zu binden
Klasse binden
<div class="test"> <div :class="{active:isActive,cc:isCc}"></div> </div>
js-Code
var myVue = new Vue({ el: ".test", data: { isActive:true, isCc:false }, });
Oder der folgende Code kann auch implementiert werden
<div class="test"> <div :class=classObject></div> </div>
js-Code
var myVue = new Vue({ el: ".test", data: { classObject:{ active:true } }, });
Klasse über Array binden
<div class="test"> <div :class="[activeClass,error]">dsdsd</div> </div>
JS-Code
var myVue = new Vue({ el: ".test", data: { activeClass:"active", error:"ddd" }, });
Stilattribut binden
<div class="test"> <div :style=styleObject>dsdsd</div> </div>
JS-Code
var myVue = new Vue({ el: ".test", data: { styleObject:{ color: "red", fontSize: "30px" } }, });
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt und ich hoffe, dass jeder die chinesische PHP-Website unterstützt.
Weitere Artikel zu vue.js-Bindungsklassen und -Stilen finden Sie auf der chinesischen PHP-Website!