vue中class的用法

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中class的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！