Vue中的样式绑定

实现一个样式，点击完Hello World变色，再点击变回去

一，Class与Style绑定

1，对象语法

首先在div上添加一个handleDivClick函数，然后再绑定一个class，并且class的值为activated，但是class是否有值，让其根据isActivated来判断

当isActivated为false时：

当其为true时

当activated发生改变时，由于是data中的数据发生变化了，所以又会重新渲染页面。

由于这种方式是给v-bind:class传入一个对象，然后动态切换class，所以叫对象语法。

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

上面的语法表示active这个class存在与否将取决于数据属性isActive的真值

既然是对象，那么我们就可以传入更多的属性来动态切换多个class，此外v-bind:class指令也可以与普通的class属性共存

点击一下之后

2，数组语法

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

既然是是一个数组，那么，也就可以添加多个元素，所以有下面的：

在点击一次之后

二，绑定内联样式

刚才是和class进行绑定，现在直接绑定到内联样式上

1，对象语法

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

点击一下

2，数组语法

再点击一下

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

当然数组里面也可以添加多个对象

点击一下