![Vue.js企业开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/909/44509909/b_44509909.jpg)
上QQ阅读APP看书,第一时间看更新
2.6 class与style样式绑定
在Vue中,经常需要动态地设置元素的CSS样式,我们可以通过v-bind属性绑定,为标签的class属性和style属性动态赋值。
2.6.1 HTML样式绑定
1.数组语法
在Vue中,动态的样式类在v-bind:class中定义,静态的类名写在class样式中。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P66_26611.jpg?sign=1734435631-fjjv8CDcIaNfCC5Qck88SAr8UdUXHQd2-0-222e3777817f697e45e2fe86db01aeee)
在浏览器中运行的效果如图2.51所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P66_7556.jpg?sign=1734435631-NcLoPlqTTtiBDevFaP9mRR9wA3bSBmpQ-0-822debe220f819347e679a351756a52a)
图2.51 数组语法渲染
在上面的示例代码中,数组中样式的类名要使用单引号包裹,不然会出错。但是在某些应用场景下,需要使用变量表示类名,在数组中也可以使用这种方式绑定样式。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P66_26612.jpg?sign=1734435631-zu50YhRaUzW5lagraPgKOIPbjMl1kRMt-0-4388065ce675c87ec5cf64752f54100b)
在数组中也可以直接使用对象语法,示例代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P67_26614.jpg?sign=1734435631-lmoDvcvazZ3vy3TKhg6nze4ucSU2Px2l-0-5a4382e4803e0f93e3a56df8d099af64)
上面代码运行的效果和图2.51所示的效果是相同的。
2.对象语法
在Vue中可以直接使用对象设置样式,对象的属性为样式的类名,其值为Boolean类型,当值为true时显示样式。对象的属性可以带引号,也可以不带引号。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P67_26615.jpg?sign=1734435631-uEpxyHWVhRCty6zvdCYfrTr85vRV5B24-0-ebc313fff039b9d9c1d697067064f94f)
上面代码运行的效果和图2.51所示的效果相同。当对象中的属性过多时,如果将所有属性都写在元素上,则标签会显得代码冗余,此时我们可以使用计算属性来解决这个问题。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P68_26617.jpg?sign=1734435631-czlDmZ9Pai7iosznPt34pU2a1GQ390Q7-0-38b7984cf710a9faae61a58015b4c6c6)
上面代码运行的效果和图2.51所示的效果是相同的。
2.6.2 内联样式绑定
内联样式是将CSS样式编写到元素的style属性中,这种操作方法与设置class样式相同,也可以使用对象为元素进行设置。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P68_26618.jpg?sign=1734435631-fJ8WbK7Y9u0nB4sy7GgwrKimHG00LtHF-0-afcf0ba301a476b21204122607880a13)
在浏览器中运行的效果如图2.52所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P69_7896.jpg?sign=1734435631-F8I9nZfe50HM0ahLw0BzShjHCYtDUgDH-0-df829a44a792f5abf9c7ea00857b4a87)
图2.52 style对象语法效果
同样,可以直接绑定一个样式对象属性,这样的代码看起来会更加简洁美观。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P69_26620.jpg?sign=1734435631-niMdhxne8KC7M2NnC2mJjWTvOceQzkdl-0-87598e7749cc92886e1d5821585fee88)
还可以使用计算属性,返回样式对象,代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P69_26621.jpg?sign=1734435631-tbZdxNuokRAV0UbjRiVjv9nnArW0Lqql-0-597420fbc1f360b645588da276e89469)
上面示例代码运行的效果和图2.52所示的效果相同。