vue动态绑定类样式ClassName知多少

对于动态绑定类样式，之前用的最多的也就是：class="{\'classA\':true}" ，今天遇到一种情况，就是要给元素动态添加一个保存在数据源中的类样式，那前边的这种写法显然满足不了。

想起之前微信小程序中动态添加类样式的方式是这样的 class=\'item good {{isEdit?"isEdit":""}}\'，那么vue中应该也有一种写法能够同时添加指定类样式与数据源中的类样式。

然后就去查了些资料做了下整理，汇总了下vue中动态添加类样式多种用法：

一. 绑定字符串（不建议使用）

<div :class=" \'classA classB\' ">Demo1</div>

二. 绑定数据变量：

<div :class="classA">Demo2</div>

data: {
  classA: \'class-a\'  //当classA改变时将更新class
}

写在指令中的值会被视作表达式，如javascript表达式，因此v-bind:class接受三目运算：

<div :class="classA ? \'class-a\' : \'class-b\' ">Demo3</div>

三. 绑定对象：

<div :class="{ \'class-a\': true, \'class-b\': false}">Demo4</div>

四. 绑定数组：

<div :class="[classA, classB]">Demo7</div>

对于绑定数组这种用法，拓展性就比较大了，可以综合上边多种组合使用，如下：

<li v-for="item in navData" :class="[{\'layui-this\':currentRouter==item.router},item.class]" >