vue中:class的用法

Vue 中 :class 屬性用於動態設定元素的 CSS 類，可依條件新增或移除類別、綁定類別陣列或物件。它接受一個包含 CSS 類別名稱的物件、陣列或字串作為值，只能套用於帶有 class 屬性的元素，並且不會覆寫現有類別。

Vue 中:class 的用法

##:class 屬性

#:class 是Vue 中的一個屬性，它允許動態設定元素的CSS 類別。它接受一個包含 CSS 類別名稱的物件、陣列或字串作為值。

語法

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

使用

:class 屬性主要用於基於資料動態地新增或移除 CSS 類別。它可以實現以下功能：

• 根據條件添加或移除類別：:class="{ 'active': isVisible }"
• ##根據資料值新增類別：:class="['class-' propValue]"
• 綁定類別數組：:class="classArray"
• 綁定類別物件：:class="{ 'class1': true, 'class2': false }"

範例##

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