vue 繫結樣式的幾種方式

2021-10-03 03:47:32 字數 799 閱讀 5922

物件語法

1.v-bind:class設定乙個物件,動態切換class

***

樣式是否起作用,根據isactive的布林值是否為true

2.:class可以和class共存

***

當isactive值為true,iserror為false,樣式為 static和isactive。

當isactive值為false,iserror為true,樣式為 static和iserror。

當isactive值為true,iserror為true ,樣式為 static和isactive、iserror

:class可以繫結資料中的物件

***

export default

}}}

陣列語法

4.v-bind:class設定乙個陣列

使用了陣列就要在data中指定重新命名

***

export default

}}

5.三元表示式

三元表示式

6.陣列語法中使用物件語法

7.定義乙個陣列通過不同索引值獲取不同樣式

created () ,

根據support.type的陣列變化,索引到classmap對應的樣式

直接繫結到乙個樣式物件,讓模板更清晰:

Vue 繫結class的幾種方式

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

vue繫結class的幾種方式

1.物件語法 在物件上繫結class屬性,來控制class 的幾種狀態。div script newvue script body 2.陣列語法 將class的屬性值組成乙個陣列來控制class的各種屬性,當class 需要有多個屬性的時候就要用陣列語法來繫結其中的值,這樣做的好處是有利於動態修改c...

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

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