php Chinese website] 2. Dynamische Bindung Klasse, der Code lautet [
De]."/> php Chinese website] 2. Dynamische Bindung Klasse, der Code lautet [
De].">

Heim  >  Artikel  >  Web-Frontend  >  So erhalten Sie eine Klasse in vue.js

So erhalten Sie eine Klasse in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-11-19 10:48:127181Durchsuche

Vue.js-Methode zum Abrufen der Klasse: 1. Verwenden Sie die Datenbindung. Der Code lautet [5102c642b2617b1455b25a8a79a95ccephp Chinesische Website5db79b134e9f6b82c0b36e0489ee08ed]; . Klasse dynamisch binden, der Code lautet [00c00d88e3e2a473e6e9dae4ddf1a5e7De].

So erhalten Sie eine Klasse in vue.js

vue.js-Methode zum Abrufen der Klasse:

1. Datenbindungsanweisungen

vue-Anweisungen sind mit dem Präfix v- gekennzeichnet, Datenbindungsanweisungen v-bind: Attributname, abgekürzt als: Attributname Ein einfaches Beispiel für die Datenbindung lautet wie folgt:

<a v-bind:href="http://www.php.com/">php中文网</a>
简写:
<a :href="http://www.php.com/">php中文网</a>

2. Das Trennzeichen der dynamischen Bindungsklasse

vue ist standardmäßig {{ }}. Die Zeichenfolge im Trennzeichen wird als Datenvariable betrachtet class bis class="{{ className }}", aber Vue empfiehlt, diese Methode nicht mit v-bind:class zu kombinieren. Sie können nur zwischen den beiden wählen . Obwohl v-bind:class 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:class dürfen am angezeigt werden gleichzeitig in einem DOM-Tag. class="{{ className }}" 方式设置class,但是vue不推荐这种方式与 v-bind:class 的方式混用,二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存,却可以与原生的class特性共存, 一个DOM标签中允许同时出现原生class和v-bind:class

2.1 v-bind:class 支持string类型,不建议这样使用,因为string值是固定不变的,无法实现动态改变class的需求

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

2.2 v-bind:class 支持数据变量,当变量值改变时,将同时更新class。v-bind:class指令的值限定为绑定表达式,如javascript表达式

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

写在指令中的值会被视作表达式,如javascript表达式,因此v-bind:class接受三目运算:

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

2.3 v-bind:class 支持对象,对象改变时会动态更新class

HTML代码:

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

2.4: v-bind:class

2.1 v-bind:class unterstützt den String-Typ. Es wird nicht empfohlen, ihn zu verwenden, da der String-Wert fest ist und die Klasse nicht dynamisch geändert werden kann.

HTML代码:
<div :class="[classA, classB]">Demo6</div>
Javascript代码:
data: {
  classA: &#39;class-a&#39;,
  classB: &#39;class-b&#39;
}
渲染后的HTML:
<div class="class-a class-b">Demo6</div>

2.2 v-bind:class wird 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, beispielsweise einen Javascript-Ausdruck
HTML代码:
<div :class="[classA, classB]">Demo7</div>
Javascript代码:
data: {
  classA: &#39;class-a&#39;,
  objectClass: {
    classB: &#39;class-b&#39;,  // classB 的值为class-b, 则将classB的值添加到class列表
    classC: false,    // classC值为false,将不添加classC
    classD: true    // classD 值为true,classC将被直接添加到class列表
}
}
渲染后的HTML:
<div class="class-a class-b classD">Demo7</div>

Der in der Direktive geschriebene Wert wird als Ausdruck betrachtet, beispielsweise als Javascript-Ausdruck , also v-bind:classAkzeptiert ternäre Operationen: rrreee2.3 v-bind:class unterstützt Objekte und die Klasse wird dynamisch aktualisiert, wenn sich das Objekt ändert

HTML-Code: 🎜rrreeerrreee🎜2.4: v-bind :class unterstützt Arrays. Wenn sich die Variablen im Array ändern, wird die Klassenliste dynamisch aktualisiert. Das Array kann Objekttypen enthalten Die Klassenliste wird ebenfalls aktualisiert🎜rrreee🎜🎜Verwandtes kostenloses Lernen Empfohlen: 🎜JavaScript🎜(Video)🎜🎜

Das obige ist der detaillierte Inhalt vonSo erhalten Sie eine Klasse in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn