Vue.jsのダイナミックバインディングクラスの詳しい説明

Vue.js の中核は、通常の HTML テンプレートの特別な構文を使用して DOM を基礎となるデータに「バインド」できるリアクティブ データ バインディング システムです。バインドされた DOM はデータとの同期が維持され、データが変更されるたびに、対応する DOM ビューが更新されます。この機能に基づいて、vue.js を介してクラスを動的にバインドすることが非常に簡単になります。

1. データ バインディング

命令は v- 接頭辞でマークされます。データ バインディング命令は、v-bind: 属性名と略されます。 簡単なデータ バインディングの例は次のとおりです。

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

2. class

vue を定義するためのデフォルトの区切り文字は {{ }} です。区切り文字内の文字列は、class="{{ className }}" を通じてクラスを設定できますが、vue はこれを推奨しません。このメソッドは v-bind:class メソッドと混合されており、2 つのうちの 1 つだけを選択できます。 v-bind:class は、class 属性で変数をバインドするメソッドと共存できませんが、ネイティブ クラス機能と共存できます。ネイティブ クラスと v-bind:class は、DOM タグ内で同時に使用できます。

2.1 v-bind:class は文字列型をサポートします。文字列値が固定されており、クラスを動的に変更する必要性を認識できないため、使用することはお勧めできません。

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

2.2 v-bind: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 はオブジェクトをサポートし、オブジェクトが変更されるとクラスは動的に更新されます

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 は配列をサポートし、配列内の変数が変更されると、配列内のクラスリストは動的に更新されます

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>

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

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>

以上がこの記事の全内容だと思います。この記事の内容が皆さんの勉強や仕事に少しでも役立つと幸いです。また、PHP 中国語 Web サイトが増えることを願っています。

Vue.js ダイナミック バインディング クラスに関連する詳細な記事については、PHP 中国語 Web サイトに注目してください。