vue class樣式資料繫結

2021-10-21 18:32:54 字數 620 閱讀 9428

>

.active

.delete

.error

style

>

>

:class

="activeclass"

>

字串表示式p

>

:class=""

>

物件表示式p

>

:class

="['active','delete','error']"

>

陣列表示式p

>

div>

>

/** v-bind:class="表示式"或者:class="表示式"

class的表示式可以為:

①字串:

:class="activeclass"

②物件:

:class="" key是樣式名,value是data中繫結的屬性

③陣列:

:class="['class1','class2']" 直接寫單引號和樣式名

*/var vm=

newvue(}

)script

>

vue class繫結與style繫結

物件語法 物件中有乙個屬性 我們可以傳給 v bind class 乙個物件,以動態地切換 class 上面的語法表示 classactive 的更新將取決於資料屬性 isactive 是否為真值 物件中有多個屬性 我們也可以在物件中傳入更多屬性用來動態切換多個 class 此外,v bind cl...

vue class繫結與style繫結

物件語法 物件中有乙個屬性 我們可以傳給 v bind class 乙個物件,以動態地切換 class 上面的語法表示 classactive 的更新將取決於資料屬性 isactive 是否為真值 物件中有多個屬性 我們也可以在物件中傳入更多屬性用來動態切換多個 class 此外,v bind cl...

vue Class與Style的資料繫結

1.傳給 v bind class 乙個物件,以動態地切換 class data 渲染結果 2.把乙個陣列傳給 v bind class,以應用乙個 class 列表 data 渲染為 3.陣列中直接在結構中判斷 三元判斷 data 結果 4.在陣列語法中也可以使用物件語法 一般用在多個條件 cla...