vue条件class_程序员都必掌握的前端教程之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. 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基础教程三》就讲完了，下篇内容主要讲解VUE的条件与循环渲染相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

程序员都必掌握的前端教程之VUE基础教程(一)

程序员都必掌握的前端教程之jQuery基础教程(上)