Vue.js ダイナミックバインディングクラスの詳細な紹介-jsチュートリアル-php.cn

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

怪我咯

リリース： 2017-03-29 16:35:23

オリジナル

1193 人が閲覧しました

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 サイトの他の関連記事を参照してください。