Vue.js ダイナミック バインディング クラスの詳細な紹介

Vue.js のコアはレスポンシブな データ バインディング システム。通常の HTML テンプレートで特別な構文を使用して、DOM を基礎となるデータに「バインド」できます。データが変更されるたびに、バインドされた DOM はデータと同期されたままになります。 アップデート。この機能に基づいて、動的バインディング1.データバインディング命令 - プレフィックスマーク、データバインディング命令v-bind:
。

name、略称: 属性名、簡単なデータ バインディングの例は次のとおりです:

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

2. 動的バインディング クラス

vue の区切り文字。デフォルトは、区切り文字内の string
です。 class="{{ className }}" を通じてクラスを設定できますが、vue ではこのメソッドを推奨しません。bind:class メソッドは混在しており、次のいずれか 1 つしか選択できません。 v-bind:class はクラス属性の変数をバインドするメソッドと共存できませんが、ネイティブ クラスと v-bind:class は両方とも共存できます。

2.1 v-bind:class は
string 型をサポートします。文字列値は固定されており、クラスを動的に変更できないため、使用することはお勧めできません。
2.2 v-bind:class はデータ変数をサポートします。変数の値が変更されると、同時にクラスも更新されます。 v-bind:class ディレクティブの値は、javascriptexpression

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

などのバインディング expression に限定されます。命令に書かれたものは JavaScript 式などの式としてみなされるため、v-bind:class は三項演算を受け入れます:

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

2.3 v-bind:class は

objects をサポートし、オブジェクトが変更されるとクラスは次のようになります動的に更新されます

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

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>

2.4: v-bind:class は

array

をサポートし、配列内の変数が変更されると、クラスリストは動的に更新されます

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

。
オブジェクトクラス

型、配列内の

オブジェクトオブジェクト
が変更されると、クラスリストも更新されます

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

以上がVue.js ダイナミック バインディング クラスの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。