Vue.js の中核は、通常の HTML テンプレートの特別な構文を使用して DOM を基礎となるデータに「バインド」できるリアクティブ データ バインディング システムです。
バインドされた DOM はデータと同期され、データが変更されるたびに、対応する DOM ビューも更新されます。この機能に基づいて、vue.js を介してクラスを動的にバインドすることが非常に簡単になります。
1. データ バインディング
vue 命令は v- 接頭辞でマークされ、データ バインディング命令 v-bind: 属性名、略称は次のとおりです。属性名、簡単なデータ バインディングの例は次のとおりです:
博客园首页
2. 動的バインディング クラス
vue のデフォルトの区切り文字は {{ }} の場合、区切り文字内の文字列はデータ変数とみなされます。class="{{ className }}"
を通じてクラスを設定できますが、vue は v-bind:class を使用したこの方法を推奨しません。メソッドが混在しているため、いずれか 1 つしか選択できません。
v-bind:class
class属性で変数をバインドするメソッドとは共存できませんが、ネイティブクラス機能とは共存できます。ネイティブクラスとvの出現は許可されています。同時に DOM タグ内で。
2.1 v-bind:class は文字列型をサポートしています。文字列値は固定されており、クラスを動的に変更できないため、使用することはお勧めできません。
HTML代码:Demo1渲染后的HTML:
2.2 v-bind:class をサポートデータ変数。変数値が変更されると、クラスも同時に更新されます。 v-bind:class ディレクティブの値は、JavaScript 式
HTML コード:
Demo2
Javascript コード:
data: { classA: 'class-a' //当classA改变时将更新class }
レンダリングされた HTML:
Demo2
命令に書かれた値は JavaScript 式などの式とみなされ、v-bind:class は三項演算を受け入れます:
HTML コード:
Demo3
レンダリングされた HTML:
Demo3
2.3 v-bind:class はオブジェクトをサポートし、オブジェクトが変更されるとクラスは動的に更新されます
HTML コード:
Demo4
Javascript コード:
data: { isA: false, //当isA改变时,将更新class isB: true //当isB改变时,将更新class }
レンダリングされた HTML:
Demo4
HTML コード:
Demo5
Javascript コード:
data: { objectClass: { class-a: true, class-b: false } }
レンダリングされた HTML :
Demo5
2.4: v-bind:class は配列をサポートしています。配列内の変数が変更されると、クラス リストは動的に更新されます。
HTML コード:
Demo6
Javascript コード:
data: { classA: 'class-a', classB: 'class-b' }
レンダリングされた HTML:
Demo6
配列にはオブジェクト タイプを含めることができます。配列内のオブジェクト オブジェクトが変更されると、クラス リストも更新されます
HTML コード:
Demo7
JavaScript コード:
data: { classA: 'class-a', objectClass: { classB: 'class-b', // classB 的值为class-b, 则将classB的值添加到class列表 classC: false, // classC值为false,将不添加classC classD: true // classD 值为true,classC将被直接添加到class列表 } }
レンダリングされた HTML:
Demo7
関連する推奨事項:
プログラミング関連の詳細については、プログラミング教育をご覧ください。 !
以上がvueでクラスを動的にバインドするにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。