vue动态绑定类名

1.通过对象绑定 

<div :class="{classname:item.name=='张三',chassname2:item.name=='李四'}"></div>

data(){
　　return {
　　　　item:{name:'张三'}
　　}
}
（当item里name的值为张三绑定类名classname，当item里name的值为李四绑定类名classname2）

2.通过数组绑定

<div :class="[item.name,item.name2]"></div>

data(){
　　return{
　　　　item:{name:'classname',name2:'classname2'}
　　}
}
(同时绑定了classname和classname2两个类名)

3.通过表达式绑定

<div :class="item.name=='张三'?'classname':'classname2'"></div>

//多表达式形式：

<div :class="item.name=='张三'?'classname':item.name=='李四'?'classname2':'classname3'"></div>

data(){
　　return{
　　　　item:{name:'张三'}
　　}
}
(当item的name值为张三时绑定classname，不为张三绑定classname2，)

4.通过计算属性绑定

<div v-for="(item,index) in list" :key="index" :class="getClass(item.name)"></div>
data(){
　　return{
　　　　list:[{name:'张三'},{name:'李四'}]
　　}
}
computed:{
　　getClss(name){
　　　　return function(value){
　　　　　　return value=='张三'?'classname':'classname2'
　　　　}
　　}
}
(数组循环过程，name的值为张三，绑定classname类名，不为张三，绑定classname2类名)