阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的Class与Style绑定等知识点。下面我们就一起来学习该块内容吧！
01 简介
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
02 绑定HTML Class
（1）对象语法
我们可以传给v-bind:class一个对象，以动态地切换class,示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>VUE基础教程</title>
6. <style>
7. .active {
8. font-size: 30px;
9. color: #2eabff;
10. }
11. </style>
12. <!-- 引用vue.js文件 -->
13. <script src="vue.js"></script>
14. </head>
15. <body>
16. <div id="app">
17. <div id="demo" v-bind:class="{active: isActive}">绑定HTML Class示列</div>
18. </div>
19. <script>
20. var vm = new Vue({
21. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
22. data: { // 数据对象
23. isActive: true //active这个class存在与否将取决于数据属性isActive的值是否为true
24. },
25. })
26. </script>
27. </body>
28. </html> 上面的语法表示active这个class存在与否将取决于数据属性isActive的值是否为true，如果为true那这个class就存在，如果为false则这个class就不存在。我们将isActive改为false再来看看样式效果
同时也可以在对象中传入更多字段来动态切换多个class。如下所示：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>VUE基础教程</title>
6. <style>
7. .active {
8. font-size: 30px;
9. }
10. .text_red{
11. color: red;
12. }
13. </style>
14. <!-- 引用vue.js文件 -->
15. <script src="vue.js"></script>
16. </head>
17. <body>
18. <div id="app">
19. <div id="demo" v-bind:class="{active: isActive, text_red: hasError}">绑定HTML Class示列</div>
20. </div>
21. <script>
22. var vm = new Vue({
23. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
24. data: { // 数据对象
25. isActive: true,
26. hasError: false
27. },
28. })
29. </script>
30. </body>
31. </html> 当isActive或者hasError变化时，class 列表将相应地更新，现在将hasError的值设为true，class列表将变为 "active text_red"如下所示
其实我们绑定的class对象不一定要写在html模板中，也可以直接在data的数据属性中编写，如下所示：
1. // html
2. <div v-bind:class="classObject"></div>
3.
4. // js
5. data: {
6. classObject: {
7. active: true,
8. 'text_red': false
9. }
10. } 这样的渲染效果与上面的示列是相同的，甚至我们这边也可以绑定一个计算属性，这是一个常用且强大的模式，示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>VUE基础教程</title>
6. <style>
7. .active {
8. font-size: 30px;
9. }
10. .text-danger{
11. color: red;
12. }
13. </style>
14. <!-- 引用vue.js文件 -->
15. <script src="vue.js"></script>
16. </head>
17. <body>
18. <div id="app">
19. <!--给class直接绑定一个classObject计算属性对象 -->
20. <div v-bind:class="classObject">绑定HTML Class示列</div>
21. </div>
22. <script>
23. var vm = new Vue({
24. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
25. data: { // 数据对象
26. isActive: true,
27. error: null
28. },
29. computed: {
30. classObject: function () {
31. return {
32. active: this.isActive && !this.error, // 结果true
33. 'text-danger': this.error && this.error.type === 'fatal' // 结果false
34. }
35. }
36. }
37. })
38. </script>
39. </body>
40. </html> （2）数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表，示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>VUE基础教程</title>
6. <style>
7. .active {
8. font-size: 30px;
9. }
10. .text-danger{
11. color: red;
12. }
13. </style>
14. <!-- 引用vue.js文件 -->
15. <script src="vue.js"></script>
16. </head>
17. <body>
18. <div id="app">
19. <!--给class直接绑定一个classObject计算属性对象 -->
20. <div v-bind:class="classObject">绑定HTML Class示列</div>
21. </div>
22. <script>
23. var vm = new Vue({
24. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
25. data: { // 数据对象
26. isActive: true,
27. error: null
28. },
29. computed: {
30. classObject: function () {
31. return {
32. active: this.isActive && !this.error, // 结果true
33. 'text-danger': this.error && this.error.type === 'fatal' // 结果false
34. }
35. }
36. }
37. })
38. </script>
39. </body>
40. </html> 如果你也想根据条件切换列表中的 class可以用三元表达式：
1. <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> 这样写将始终添加errorClass，但是只有在isActive 是true时才添加 activeClass。
（3）在组件上绑定class
当在一个自定义组件上使用 class属性时，这些 class 将被添加到该组件（组件相当于一个模块，一个VUE的HTML页面可以由多个组件嵌套而成）的根元素上面。这个元素上已经存在的 class 不会被覆盖。如果你声明了如下组件
1. Vue.component('my-component', {
2. template: '<p class="foo bar">Hi</p>'
3. }) 然后在调用组件的时候添加一些 class：
1. <my-component class="baz boo"></my-component> 最终渲染的结果如下
1. <p class="foo bar baz boo">Hi</p> 可以发现新添加的class并不会覆盖之前定义时已存在的class。对于带数据绑定class 也同样适用
1. <my-component v-bind:class="{ active: isActive }"></my-component> 当isActive为true时渲染结果如下:
1. <p class="foo bar active">Hi</p> 03 Style样式绑定
（1）对象语法
v-bind:style的对象语法十分直观看着非常像CSS，但其实是一个JavaScript对象。CSS property名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用引号括起来) 来命名，示列如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>VUE基础教程</title>
6. <!-- 引用vue.js文件 -->
7. <script src="vue.js"></script>
8. </head>
9. <body>
10. <div id="app">
11. <!-- 绑定style样式 -->
12. <div v-bind:style="{ color: activeColor, fontSize: fontSize }">style绑定示列</div>
13. </div>
14. <script>
15. var vm = new Vue({
16. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
17. data: { // 数据对象
18. activeColor: 'red', // 设置字体颜色
19. fontSize: '30px' // 设置字体大小
20. },
21. })
22. </script>
23. </body>
24. </html> 也可以直接绑定到一个样式对象，这会让模板更清晰，一般我们使用这种方式比较多，如下所示
1. // html
2. <div v-bind:style="styleObject"></div>
3.
4. // js
5. data: {
6. styleObject: {
7. color: 'red',
8. fontSize: '13px'
9. }
10. } （2）数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上，如下所示
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>VUE基础教程</title>
6. <!-- 引用vue.js文件 -->
7. <script src="vue.js"></script>
8. </head>
9. <body>
10. <div id="app">
11. <!-- style绑定数组 -->
12. <div v-bind:style="[activeColor, fontSize]">style绑定示列</div>
13. </div>
14. <script>
15. var vm = new Vue({
16. el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
17. data: { // 数据对象
18. activeColor: {color: 'red'}, // 设置字体颜色
19. fontSize: {fontSize: '30px'} // 设置字体大小
20. },
21. })
22. </script>
23. </body>
24. </html> （3）自动添加前缀
在实际开发中，由于浏览器内核不同，使用某些 CSS 属性需要带各个浏览器的前缀，然而如果你在 Vue 中使用了 v-bind:style你完全不用去考虑，因为 Vue 在编译过程中，会自动给需要前缀的属性加前缀。
（4）多重值
从2.3.0起你可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，如下所示
1. <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display: flex。
04 总结
至此我们《VUE基础教程三》就讲完了，下篇内容主要讲解VUE的条件与循环渲染相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：