<div v-for="item in list" class="home-con">
<div :class="testClass(item.id)" :data-id="item.id">{{item.id}}</div>
</div>
methods:function(){
testClass: function (value) {
let obj = {className: true}
obj["className-icon "+`${value}`] = true
console.log(obj);
return obj
}
}
1、布爾值的綁定方式
<div id="demo">
<span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB}"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
isA: true,
isB: true
}
})
2、變量的綁定方式
<div id="demo">
<span :class=[classA,classB]></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"class-a",
classB:"class-b"
}
})
3、字符串綁定方式
<div id="demo">
<span :class="classA"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
classA:"string"
}
})
4、綜合的寫法
<div id="demo">
<span :class="[one,{‘classA‘:classa,‘classB‘:classb}]"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
one:"string",
classa:true,
classb:false
}
})
