vue繫結class的幾種方式

2021-10-23 21:07:47 字數 1289 閱讀 8820

1.物件語法

在物件上繫結class屬性,來控制class 的幾種狀態。

>

>

div>

script

>

>

newvue(}

)script

>

body

>

2.陣列語法

將class的屬性值組成乙個陣列來控制class的各種屬性,當class 需要有多個屬性的時候就要用陣列語法來繫結其中的值,這樣做的好處是有利於動態修改class的值。

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

>

.active

style

>

head

>

>

:class

="[isactive ? activecls : '

', errorcls]"

>

div>

div>

script

>

>

// 繫結陣列運算符號

newvue(}

)script

>

body

>

html

>

3.在元件上使用

如果在元件上使用class 或者:clas上,樣式規則會直接應用到這個元件的跟元素上,如下所示:

>

:class=""

>

my-component

>

div>

script

>

>

// 自定義元件

vue.

component

('my-component',)

;// 繫結陣列運算符號

newvue(}

)script

>

最終渲染後的結果為

class

="article"

>

這是一些文字文章!!!!p

>

這種用法僅僅適用於自定義元件的外層是乙個根元素,否則會無效,當不滿足這種條件或者給具體的子元素設定類名的時候應當使用元件的props來傳遞。

Vue 繫結class的幾種方式

我們可以傳給v bind class乙個物件,以動態地切換 class 上面的語法表示active這個 class 存在與否將取決於資料屬性isactive的 truthiness。你可以在物件中傳入更多屬性來動態切換多個 class。此外,v bind class指令也可以與普通的 class 屬...

vue動態繫結class的幾種方式 Vue

物件方法 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 也可以把後面繫結的物件寫在乙個變數放在data裡面,可以變成下面這樣 class classobject data 第三種 使用computed屬性 class classobject da...

vue動態繫結class的幾種方式

物件方法 最簡單的繫結 這裡的active加不加單引號都可以,以下也一樣都能渲染 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 也可以把後面繫結的物件寫在乙個變數放在data裡面,可以變成下面這樣 class classobject data 第...