【vue系列】class动态绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
------------------官方文档

1. 我们可以传给 v-bind:class 一个对象，以动态地切换 class：

 <div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness(布尔值)。

2. v-bind:class可以与普通的class属性共存，如：

	 <div class="static"v-bind:class="{ active: isActive, a }"></div>   
	 //但是不能另起一个 class标签（会报错）  一个div里面只能有一个class

3. v-bind可以绑定一个数组，如

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为
<div class="active text-danger"></div>

4. 可以绑定三元运算符

<div v-bind:class="[isActive ? activeClass : '']"></div>

有时候使用三元运算符报错
- 你是否使用了{{}} 在 :class 中不推荐 v-bind：与{{}}混用
- 你是否class名字没用 ‘’包裹？如 a？b：c【×】->a?‘b’:‘c’【√】