Vue的样式绑定

一、 绑定class

1. 第一种:样式和数据的绑定，通过对象方式{ }

v-bind:class设置一个对象。当isActivated为true的时候，div上会增加一个class属性，属性名称为activated，如果再在css里加上activated类的样式，则会有CSS效果了；如果isActivated为false，则没有class属性。在函数中使当前状态取反做到来回切换。

2.第二种方式：通过数组方式，v-bind:class设置一个数组。

class里面存放的是一个数组，我们最开始在data中将activated置为空，在点击时，减少冗余用下面的三元表达式，如果this.activated等于activated，再次置空，如果不等于activated，就赋值为activated。

二、绑定style

1. 通过对象方式{ }。

在元素div的style内联样式上添加一个StyleObj对象，在data中添加对应的对象，然后通过methods里的方法来改变对象的值，从而渲染页面。

2. 通过数组方式[ ]。

数组语法的意思是如果v-bind:style后面是一个数组，那么我这个样式就由数组里面的对象来决定

总结：无论通过style绑定还是class绑定，都有对象和数组两种方式。