Detaillierte Einführung in die dynamische Bindungsklasse von Vue.j

Der Kern von Vue.js ist ein reaktionsfähiges Datenbindung System, das es uns ermöglicht, in gewöhnlichen HTML-Vorlagen eine spezielle Syntax zu verwenden, um das DOM an die zugrunde liegenden Daten zu „binden". Das gebundene DOM wird jederzeit mit den Daten synchronisiert Wenn sich die Daten ändern, wird die entsprechende DOM--Ansicht ebenfalls basierend auf dieser Funktion aktualisiert, dynamische Bindung über vue.js class wird sehr einfach 🎜>vue-Anweisungen werden mit dem Präfix v-bind:attributename gekennzeichnet, abgekürzt als: Attributname. Ein einfaches Beispiel für die Datenbindung lautet wie folgt:

2. Das Standardtrennzeichen der dynamischen Bindungsklasse

vue ist {{ }} und Die

Zeichenfolge im Trennzeichen wird berücksichtigt. Für Daten--Variablen
können Sie die Klasse über class="{{ className }}" festlegen, Vue empfiehlt jedoch nicht, diese Methode zu mischen mit v-bind:class. Die beiden können nur

<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>
简写：
<a :href="http://www.cnblogs.com/">博客园首页</a>

Wählen Sie eine aus, obwohl v-bind:class nicht mit der Methode zum Binden von Variablen im Klassenattribut koexistieren kann native class und v-bind:class dürfen in einem DOM-Tag erscheinen. 2.1 v-bind:class unterstützt den Typ

string
. Es wird nicht empfohlen, ihn zu verwenden weil der String-Wert fest ist und die Klasse nicht dynamisch ändern kann
2.2 v-bind:class unterstützt Datenvariablen, wenn sich der Variablenwert ändert Gleichzeitig wird der Wert der v-bind:class-Direktive auf den bindenden -Ausdruck beschränkt, z. B.

javascript

expression

Der im Befehl geschriebene Wert wird als Ausdruck betrachtet, beispielsweise als Javascript-Ausdruck. Daher akzeptiert v-bind:class ternäre Operationen:

HTML代码：
<p :class=" &#39;classA classB&#39; ">Demo1</p>
渲染后的HTML:
<p class="classA classB">Demo1</p>

2.3 v-bind:class unterstützt Objekt und Klasse<🎜 wird dynamisch aktualisiert, wenn sich das Objekt ändert >

HTML代码：
<p :class="classA">Demo2</p>
Javascript代码：
data: {
 classA: &#39;class-a&#39; //当classA改变时将更新class
}
渲染后的HTML:
<p class="class-a">Demo2</p>

HTML代码：
<p :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</p>
渲染后的HTML:
<p class="class-a">Demo3</p>

2.4: v-bind:class unterstützt

Array. Wenn sich die Variablen im Array ändern, wird die Klassenliste dynamisch aktualisiert

Das Array kann den Typ

HTML代码：
<p :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</p>
Javascript代码：
data: {
 isA: false, //当isA改变时，将更新class
 isB: true //当isB改变时，将更新class
}
渲染后的HTML:
<p class="class-b">Demo4</p>

Objektklasse

enthalten, und das
Objektobjekt< im Array 🎜>Änderung aktualisiert auch die Klassenliste

HTML代码：
<p :class="objectClass">Demo5</p>
Javascript代码：
data: {
 objectClass: {
 class-a: true,
 class-b: false
 }
}
渲染后的HTML:
<p class="class-a">Demo5</p>

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die dynamische Bindungsklasse von Vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!