2.4 绑定动态样式

在项目开发中，动态的页面中除了要绑定动态的数据，还要绑定动态的样式。在模板中，给标签绑定动态样式的方式有两种，分别是class绑定和style绑定。在HTML中这两者的值都是字符串类型，而在Vue中自然也可以绑定动态的字符串值，但频繁地使用连接字符串对于开发者来说，不仅操作冗余枯燥，同时也很容易出现错误。

为此，Vue专门增强了class和style的绑定语法，Vue不仅可以支持动态字符串，还可以指定对象和数组类型值。本节主要讲解Vue绑定动态样式的两种方式。

2.4.1 class绑定

class绑定就是通过“v-bind：class="表达式"”来绑定动态类名样式的，当然我们一般会使用“：class="表达式"”的简写方式。表达式的值支持字符串、对象和数组3种类型，而且这3种类型的写法的使用场景也不尽相同，本节将带领读者依次学习和使用。

我们首先明确这3种类型的写法的使用场景（见表2-1），然后思考下面代码的运行效果。

值得一提的是，在一个标签上静态class与动态class可以同时存在，最终编译后，Vue会将动态class与静态class合并，并指定为标签对象的class样式。

我们来看下面的代码，读者在阅读代码时可以思考对应标签最终应用了哪个样式。

CSS代码如下。

Vue代码如下。

JavaScript代码如下。

代码运行后的初始页面效果和此时元素应用的类名如图2-23和图2-24所示。

在上面的代码中，每个div元素都有一个静态class“basic”。

当点击第1个div元素时，它的样式会在normal、sad和happy这3个类名中随机切换，显示的样式也会随之更新。

当点击第2个div元素时，它的样式会在atguigu1和atguigu2这2个类名中来回切换，显示的样式也会随之更新。

当点击第3个div元素时，第1次点击类名中减少atguigu3，第2次点击类名中减少atguigu2，第3次点击类名中减少atguigu1。此时再点击div元素，页面不会发生变化，只会应用静态class的效果，因为此时已经没有动态的类名了。

2.4.2 style绑定

与class绑定类似，style绑定同样是通过“v-bind：style="表达式"”来绑定动态style样式的，当然我们一般会使用“：style="表达式"”的简写方式。表达式的值支持字符串、对象和数组3种类型，但是在实际开发中，开发者一般使用对象类型的写法。下面我们来编码测试一下。

CSS代码如下。

Vue代码如下。

JavaScript代码如下。

在上面的代码中，我们分别为3个div元素动态地绑定了data方法中的字符串、对象和数组，并且同时为其添加了点击事件。

当点击第1个div元素时，触发updateStyle1方法，动态地将字符串的值变为“font-size：20px；color：blue”。

当点击第2个div元素时，触发updateStyle2方法，动态地将对象中fontSize和color的值变为“50px”和“blue”。

当点击第3个div元素时，触发updateStyle3方法，动态地将数组中color的值变为“red”。

运行代码后，初始页面效果如图2-25所示，更新后的页面效果如图2-26所示。