Vue で: クラスの使用法

Vue の :class 属性は、要素の CSS クラスを動的に設定するために使用され、条件に基づいてクラス、バインドされたクラス配列、またはオブジェクトを追加または削除できます。 CSS クラス名を含むオブジェクト、配列、または文字列を値として受け入れ、クラス属性を持つ要素にのみ適用でき、既存のクラスをオーバーライドしません。

#Vue でのクラスの使用法

:クラス属性 # :class は、要素の CSS クラスを動的に設定できる Vue のプロパティです。 CSS クラス名を値として含むオブジェクト、配列、または文字列を受け入れます。

構文

<code>:class="['class1', 'class2', { 'class3': true }]"</code>

使用法

: class 属性は主に、データに基づいて CSS クラスを動的に追加または削除するために使用されます。 。次の関数を実装できます:

条件に基づいてクラスを追加または削除します:

:class="{ 'active': isVisible }"
• Based onデータ値 クラスの追加:
:class="['class-' propValue]"
• バインド クラス配列:
:class="classArray"
• # # バインディング クラス オブジェクト: :class="{ 'class1': true, 'class2': false }"
Example

<code class="html"><div :class="{ 'active': isVisible, 'error': hasError }"></div></code>

上の例では、isVisible と

hasError の値に基づいて、active クラスと error クラスを動的に追加または削除します。

<code class="html"><div :class="classArray"></div></code>

上の例では、要素に追加するクラス名を含むクラスの配列をバインドします。

注

: class 属性は、

class

属性を持つ要素にのみ適用できます。
• :class 属性は要素の既存のクラスを上書きしませんが、要素を既存のクラスに追加します。
値がブール値の場合、クラス名をキーとしてクラス オブジェクトに対応する値が設定されます。

以上がVue で: クラスの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。