vue如何動態(tài)綁定class？方法介紹

第vue如何動態(tài)綁定class？方法介紹Vue.js的核心是一個響應的數(shù)據綁定系統(tǒng)，它允許我們在普通HTML模板中使用特殊的語法將DOM綁定到底層數(shù)據。

被綁定的DOM將與數(shù)據保持同步，每當數(shù)據有改動，相應的DOM視圖也會更新。基于這種特性，通過vue.js動態(tài)綁定class就變得非常簡單。

1.數(shù)據綁定

vue指令以v-前綴標示，數(shù)據綁定的指令v-bind:屬性名,簡寫為:屬性名,簡單的數(shù)據綁定例子如下：

av-bind:href=

a:href=/博客園首頁/a

2.動態(tài)綁定class

vue的分隔符默認是{{}},在分隔符里面的字符串會被認為是數(shù)據變量，可以通過>

v-bind:class雖然與class屬性里綁定變量的方式不能共存，卻可以與原生的class特性共存，一個DOM標簽中允許同時出現(xiàn)原生class和v-bind:class。

2.1v-bind:class支持string類型，不建議這樣使用，因為string值是固定不變的，無法實現(xiàn)動態(tài)改變class的需求

HTML代碼：

div:>

2.2v-bind:class支持數(shù)據變量，當變量值改變時，將同時更新class。v-bind:class指令的值限定為綁定表達式，如JavaScript表達式

HTML代碼：

div:>

Javascript代碼：

data:{

classA:class-a//當classA改變時將更新class

}

渲染后的HTML:

div>

寫在指令中的值會被視作表達式，如javascript表達式，因此v-bind:class接受三目運算：

HTML代碼：

div:>

渲染后的HTML:

div>

2.3v-bind:class支持對象，對象改變時會動態(tài)更新class

HTML代碼：

div:>

Javascript代碼：

data:{

isA:false,//當isA改變時，將更新class

isB:true//當isB改變時，將更新class

}

渲染后的HTML:

div>

HTML代碼：

div:>

Javascript代碼：

data:{

objectClass:{

class-a:true,

class-b:false

}

渲染后的HTML:

div>

2.4:v-bind:class支持數(shù)組,數(shù)組里的變量改變時，會動態(tài)更新class列表

HTML代碼：

div:>

Javascript代碼：

data:{

classA:class-a,

classB:class-b

}

渲染后的HTML:

div>

數(shù)組中可以包含object類型，數(shù)組中的object對象改變，也會更新class列表

HTML代碼：

div:>

Javascript代碼：

data:{

classA:class-a,

objectClass:{

classB:class-b,//classB的值為class-b,則將classB的值添加到class列表

classC:false,//classC值為false,將不添加clas