程序员都必掌握的前端教程之VUE基础教程（三）
阅读本文约需要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: functiоn () { 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: functiоn () { 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管理局专注计算机领域技术、大学生活、学习方法、求职X、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同长大。
文章推荐：
程序员都必掌握的前端教程之VUE基础教程（一）
程序员都必掌握的前端教程之jQuery基础教程（上）
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126524.html
starterknow