Vue系列（三）——绑定class绑定style

Hello小伙伴们，还记得上一次讲到什么了吗？模板语言是什么呀~为什么要把绑定挪到这里来分享呢，是因为它用到了我们上次说到的指令v-，这里用到的是v-bind。

Class

在我们平时的开发工作中，我们常常会需要对class进行变化，从而达到某些目的，比如一个组件的交互等。这些都会涉及大量的JS代码，在Vue中，我们需要做的只是计算出字符串的结果就行了。举个例子：

1) 在HTML中：

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

我们给div绑定了active class，这个class会不会生效则是决定于isActive的值，我们只需对这个值进行操作就可以控制class了。

2) 在js中

data: { isActive: true }//这就有这个class了

data: { isActive: false}//这就没有这个class了

当然，这传给class的对象也可以是多条，

比如<div v-bind:class="{ rabbit: isRabbit, lovely: isLovely }"></div>

3）当isRabbit和isLovely都为true时，则渲染成：

<div class="rabbit lovely"></div>

4）我们甚至可以把整个class对象摘到js中去写，其实效果是一样的了。

5) 还有一种写法就是，不是通过变换class绑定的值来改变class，二是通过改变class名称来改变：

<div v-bind:class="[rabbitClass, dogClass]"></div>

我们这里要做的是给rabbitClass和dogClass赋值，得到className

data: { rabbitClass: 'rab', dogClass: 'doggie'}

渲染成为：<div class="rab doggie"></div>

Style

对于Style来说，在JS中改变style那么就避免不了DOM的操作了，这其实是很浪费的。在Vue中也可以像绑定class一样，绑定style。

1）在HTML中：

<div v-bind:style="{ color:rabbitColor , font-size: size }"></div>

2）在js中：

data: { rabbitColor: 'white', size: 12}

3) 渲染效果：

<div style="color: 'white'; font-size:12;"></div>

4) 同class一样，style也可以直接改变style：

<div v-bind:style="[rabbitStyles, catStyles]"></div>

所以class和style可以对应来看，今天的分享就到这里啦，喜欢兔妞的文章请关注并点击在看哟~~