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:

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

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

HTML-Code:

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

Rendered HTML:

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

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>

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
}

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

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

Weitere programmierbezogene Kenntnisse finden Sie unter:

! !

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!