样式绑定 ：class
我们先来思考下这个”样式绑定“是什么意思？
样式：元素的样式外观，涉及到的俩个元素标签内的属性是：class 和 style
绑定：vue牛逼不就牛逼在绑定上么，之前我们学习的都是绑定具体的属性值，比如id,name,value ，还有一些具体text文本，也就是标签内夹着的文案。那么现在，vue可以说，连样式，class和style也可绑定，动态的改编绑定的样式，这样就可以让元素的外观，颜色，大小，位置等也可以实时的发生各种变化。
现在，就理解了这个vue的样式绑定是什么意思了吧。
现在，让我们跟随博主，来看看这个样式的写法的演变过程：注意，代码中的active 是一个 公共样式集合，代表长宽100px，颜色绿色。、
1.不绑定：
来看一下原始的写法：
<div class="active"></div>
2.vue的写法：
<div v-bind:class="{ 'active': true }"></div>
此时，可以通过控制这个值为true还是false来控制是否要采用activer的样式。
3.vue用变量绑定：
<div id="app"> <div v-bind:class="{ 'active': isActive }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }) </script>
这个时候，我们可以通过控制变量isActive的值来让这个div元素随时变幻颜色了。
4.再加一个样式集合。
如图，我们可以用控制一个元素的多个样式。
5.在元素的class属性内写个字典。
然后具体的字典来存放多个样式的是否选用。样式名可以用和不用引号。
6.更复杂的用法：放在计算属性computed中：
如上图，我们用一个函数：classObject 来计算这个元素的样式。其中三个样式，图中用三种方法演示是否使用。
注意这里有三点我们可以学到：
1.样式绑定的函数可以返回一个字典
2.字典中的key可以不用引号包裹
3.样式的值可以是true/false，也可以是表达式，自动计算出true/false。
7.样式用数组包裹
其中数组元素是样式集合的名字：
这里我们可以学习到俩点：1.元素内的样式名要用引号包裹起来；2.后面的样式会覆盖前面的样式中重复的部分，如background颜色。这种数组存放的多个样式，没办法控制谁显示谁弃用。
8.数组中是变量
这样也可以通过控制变量的值，来控制选择什么样式，和字典那种控制是截然不同的俩种思路。
9.数组中用三元表达式
这个三元表达式还真是随处可见，没想到在列表中也可以用呢。
