Wie binde ich Klassen dynamisch in Vue? Methodeneinführung

Der Kern von Vue.js ist ein reaktives Datenbindungssystem, das es uns ermöglicht, das DOM mithilfe einer speziellen Syntax in gewöhnlichen HTML-Vorlagen an die zugrunde liegenden Daten zu „binden“.

Das gebundene DOM wird mit den Daten synchronisiert, wenn sich die Daten ändern, wird auch die entsprechende DOM-Ansicht aktualisiert. Basierend auf dieser Funktion wird das dynamische Binden von Klassen über vue.js sehr einfach.

1. Datenbindungsanweisungen

Vue-Anweisungen sind mit dem Präfix v-bind: Attributname gekennzeichnet, abgekürzt als: Attributname:

rrree

2. Das Standardtrennzeichen der dynamisch gebundenen Klasse

vue ist {{ }}. Die Zeichenfolge im Trennzeichen wird als Datenvariable betrachtet, die class="{{ className }}" übergeben werden kann. -Methode zum Festlegen der Klasse, Vue empfiehlt jedoch nicht, diese Methode mit der v-bind:class-Methode zu kombinieren. Sie können nur eine der beiden auswählen. class="{{ className }}" 方式设置class，但是vue不推荐这种方式与 v-bind:class 的方式混用，二者只能选其一。

v-bind:class

v-bind:class Obwohl es nicht mit der Methode zum Binden von Variablen im Klassenattribut koexistieren kann, kann es mit der nativen Klassenfunktion koexistieren. Die native Klasse und v-bind dürfen unter angezeigt werden gleichzeitig in einem DOM-Tag: Klasse.

2.1 v-bind:class unterstützt den String-Typ, da der String-Wert fest ist und die Notwendigkeit einer dynamischen Änderung der Klasse nicht erkannt werden kann.

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

2.2 v-bind:class unterstützt Datenvariablen Wenn sich der Variablenwert ändert, wird gleichzeitig die Klasse aktualisiert. Der Wert der v-bind:class-Direktive ist auf einen Bindungsausdruck beschränkt, z. B. einen Javascript-Ausdruck Direktive Wird als Ausdruck betrachtet, beispielsweise als Javascript-Ausdruck, sodass v-bind:class ternäre Operationen akzeptiert:

HTML-Code:

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

Rendered HTML:

<div :class="classA">Demo2</div>

2.3 v-bind:class unterstützt Objekte und Objektänderungen Die Klasse wird dynamisch aktualisiert, wenn

HTML-Code:

data: {
  classA: 'class-a'  //当classA改变时将更新class
}

Javascript-Code:

<div class="class-a">Demo2</div>

gerenderter HTML-Code:

<div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div>

HTML-Code:

<div class="class-a">Demo3</div>

gerenderter HTML-Code:

<div :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</div>

e

2.4: v -bind: Die Klasse unterstützt Arrays. Wenn sich die Variablen im Array ändern, wird die Klassenliste dynamisch aktualisiert Wenn sich das Objektobjekt ändert, wird auch die Klassenliste aktualisiert. HTML-Code:

data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

. Javascript-Code:

<div class="class-b">Demo4</div>

Zusammenfassung (beigefügt) Antwort)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere programmierbezogene Kenntnisse finden Sie unter:

Programmierlehre

! !

Das obige ist der detaillierte Inhalt vonWie binde ich Klassen dynamisch in Vue? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!