本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的Class与Style绑定等知识点。下面我们就一起来学习该块内容吧！
01 简介
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
02 绑定HTML Class
(1)对象语法
我们可以传给v-bind:class一个对象，以动态地切换class,示列如下
1. html> 2. 3. 4. 5. VUE基础教程 6. 12. 13. 14. 15. 16.
17.
绑定HTML Class示列
18. 19. 27. 28.
上面的语法表示active这个class存在与否将取决于数据属性isActive的值是否为true，如果为true那这个class就存在，如果为false则这个class就不存在。我们将isActive改为false再来看看样式效果
同时也可以在对象中传入更多字段来动态切换多个class。如下所示：
1. html> 2. 3. 4. 5. VUE基础教程 6. 14. 15. 16. 17. 18.
19.
绑定HTML Class示列
20. 21. 30. 31.
当isActive或者hasError变化时，class 列表将相应地更新，现在将hasError的值设为true，class列表将变为 "active text_red"如下所示
其实我们绑定的class对象不一定要写在html模板中，也可以直接在data的数据属性中编写，如下所示：
1. // html 2.这样的渲染效果与上面的示列是相同的，甚至我们这边也可以绑定一个计算属性，这是一个常用且强大的模式，示列如下
1. html> 2. 3. 4. 5. VUE基础教程 6. 14. 15. 16. 17. 18.
19. 20.
绑定HTML Class示列
21. 22. 39. 40.
(2)数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表，示列如下：
1. html> 2. 3. 4. 5. VUE基础教程 6. 14. 15. 16. 17. 18.
19. 20.
绑定HTML Class示列
21. 22. 39. 40.
如果你也想根据条件切换列表中的 class可以用三元表达式：
1.这样写将始终添加errorClass，但是只有在isActive 是true时才添加 activeClass。
(3)在组件上绑定class
当在一个自定义组件上使用 class属性时，这些 class 将被添加到该组件(组件相当于一个模块，一个VUE的HTML页面可以由多个组件嵌套而成)的根元素上面。这个元素上已经存在的 class 不会被覆盖。如果你声明了如下组件
1. Vue.component('my-component', { 2. template: 'Hi
' 3. })
然后在调用组件的时候添加一些 class：
1.最终渲染的结果如下
1.Hi
可以发现新添加的class并不会覆盖之前定义时已存在的class。对于带数据绑定class 也同样适用
1.当isActive为true时渲染结果如下:
1.Hi
03 Style样式绑定
(1)对象语法
v-bind:style的对象语法十分直观看着非常像CSS，但其实是一个JavaScript对象。CSS property名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用引号括起来) 来命名，示列如下
1. html> 2. 3. 4. 5. VUE基础教程 6. 7. 8. 9. 10.
11. 12.
style绑定示列
13. 14. 23. 24.
也可以直接绑定到一个样式对象，这会让模板更清晰，一般我们使用这种方式比较多，如下所示
1. // html 2.(2)数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上，如下所示
1. html> 2. 3. 4. 5. VUE基础教程 6. 7. 8. 9. 10.
11. 12.
style绑定示列
13. 14. 23. 24.
(3)自动添加前缀
在实际开发中，由于浏览器内核不同，使用某些 CSS 属性需要带各个浏览器的前缀，然而如果你在 Vue 中使用了 v-bind:style你完全不用去考虑，因为 Vue 在编译过程中，会自动给需要前缀的属性加前缀。
(4)多重值
从2.3.0起你可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，如下所示
1.这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display: flex。
04 总结
至此我们《VUE基础教程三》就讲完了
