vue.jsでクラスを取得する方法-Vue.js-php.cn

クラスを取得するための Vue.js メソッド: 1. データバインディングを使用します。コードは [php 中国の Web サイト De] です。

vue.jsでクラスを取得する方法

#vue.js クラス取得メソッド:

vue 命令には v- 接頭辞が付いています。データバインディング命令 v-bind: 属性名、省略形: 属性名。簡単なデータバインディングの例は次のとおりです:

php中文网 简写： php中文网

ログイン後にコピー

2 ,ダイナミックバインディングクラス

#vue の区切り文字は、デフォルトでは {{ }} です。区切り文字内の文字列はデータ変数とみなされ、

class="{{ className として渡すことができます。 }}"

メソッドを使用してクラスを設定しますが、vue ではこのメソッドをv-bind:classメソッドと混合することはお勧めしません。選択できるのは 2 つのうちの 1 つだけです。 v-bind: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>

ログイン後にコピー

ディレクティブに記述された値は、次のような式とみなされます。したがって、

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 コード:

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代码： <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代码： 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

ログイン後にコピー

関連する無料学習の推奨事項: