vue动态绑定class的几种方法

对象语法

<div class="static" :class="{ active: isActive, 'done': isDone }" ></div>
data: {
  isActive: true,
  isDone: false
}
结果渲染为：<div class="static active"></div>

数组语法

<div :class="[activeClass,otherClass]"></div>
data: {
  activeClass: 'active',
  otherClass: 'otherOne'
}
结果渲染为：<div class="active otherOne"></div>

三目运算法

<div v-bind:class="[isActive? 'activeOne' : 'activeTwo', otherClass]"></div>
data: {
  isActive:true
}
这样始终都有 otherClass ，结果渲染为：
<div class="activeOne otherClass"></div>

vue动态字符串拼接方法 在vue循环里面绑定class还不错

写法：
:class="`字符串${index}`"
例如：
<div  :class="`count${index}`"  v-for=(item,index) in dataArr" :key="index"></div>
data:{
	dataArr:["one","two"]
}
渲染为：
<div  class="count0"></div>
<div  class="count1"></div>