Vue基础学习笔记 --- Class和Style 绑定v-bind

通过v-bind来绑定class和style来指定样式是很常见的，他们都是元素的属性，表达式结果的类型可以是数组、对象、字符串

格式：

• class：

v-bind：class=‘表达式’   或者  ：class=‘表达式’

其中表达式可以为：

1. 字符串  :class='activeClass'
2. 对象      :class='{active:isActive,error:hasError}'
3. 数组      :class='["active","error"]'  数组里面的元素要加双引号，要不然获取的是data中的值  ；数组中也可以包含对象，当对象的属性值发生改变的时候，也会更新class列表

• style：

:style的表达式一般都为对象

:style="{color:activeColor,fontSize:fontSize+'px'}"    activeColor和fontSize都是data中的属性

（当在实际的应用时，如果class后面跟的是字符串，那么不用v-bind动态绑定，因为string值是固定不变的。）

//写在指令中的值会被视作表达式，如javascript表达式，因此v-bind:class支持三目运算
 <div :class="classA ? 'class-a' : 'class-b' ">三目运算</div>