vueでのクラスの使い方

Vue.js の Class プロパティを使用すると、CSS クラスを動的に追加または削除できます。その値はオブジェクト、キーは CSS クラス名、値はブール値です。キーに対応する値が true の場合、対応する CSS クラスが要素に適用され、キーに対応する値が false の場合、対応する CSS クラスが要素から削除されます。複数の CSS クラスをスペースで指定できます。

#Vue.js の Class 属性

Class 属性とは何ですか?

Vue.js の

class プロパティを使用すると、HTML 要素の CSS クラスを動的に追加または削除できます。

使用法:

<code><div :class="{ active: isActive, disabled: isDisabled }"></div></code>

構造:

class 属性の値はオブジェクトです、ここで：

キーは CSS クラス名です
• 値はブール値で、クラスを適用するかどうかを示します

# #動的アプリケーション CSS クラス:

オブジェクトのキーに対応する値 (

isActive

と isDisabled) が true の場合を指定すると、対応する CSS クラス (active および disabled) が要素に適用されます。

CSS クラスの削除:

オブジェクトのキーに対応する値が

false

の場合、対応する CSS クラスが要素 。

複数の CSS クラス:

スペースを使用して、複数の CSS クラスをオブジェクト キーとして指定できます:

<code><div :class="{ 'class-1': condition1, 'class-2': condition2 }"></div></code>

注:

class
• 属性の値はオブジェクトである必要があります。 CSS クラス名は、一重引用符または二重引用符で囲んだ文字列として表現する必要があります。
• ブール値は
true
• または false である必要があります。

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