vue2.x中class和style绑定的实际应用

• class和style绑定应该是最常用的属性之一了，两个属性的作用几乎都是围绕着改变样式，本篇文章讨论的是class和style的应用场景和技巧。如果有发现有争议的地方，欢迎指正、讨论或补充（づ￣3￣）づ╭❤～

什么时候应该用style绑定？

• 当样式值需要动态计算的时候需要用到:style，比如.div2的高度需要设置为跟高度不固定的.div1相同，这个时候可以配合vue的计算属性computed来编写

  
里面有个不知道有多少条的list
  

computed: {
  styleHeight () {
    let _el = this.$el.querySelector('.div1')
    let height = window.getComputedStyle(_el, null).getPropertyValue('height')
    return {height: height}
  }
}

应该只有这一种情况一定要用到:style，其他能用:class的尽量都用:class，因为HTML，js，css，还是分开写看起来条理比较清晰，维护起来也容易一些。要是你样式写的哪儿哪儿都是，其他同事读你的代码的时候会很崩溃的。。

什么时候应该用class绑定？

• 如果你想动态改变样式，首先想到的就应该是这种方法，实在不行了再去用内联style。Vue.js 在这方面做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。下面举几个实际应用中最常见的例子（需求是乱写的）

• 需求1：做一个状态列表，不同的状态用不同颜色的字体展示。
  先写个错误示例

这样写的同学应该是基本没看过文档的，写Vue之前我觉得至少应该先把文档的基础部分看完，这样写出来的代码在熟练了Vue之后至少不会有重写它的冲动┑(￣Д ￣)┍，好我们来修改一下HTML部分：

代码是不是精简多了？这种写法就是文档中的数组语法+拼接字符串，数组的元素可以是字符串、模型字段、表达式或对象，上面写法数组中的第一项是每个span都有的类名，第二项是根据statusCode动态改变的类名

• 需求2：做一个产品列表，如果这条产品是公司代销的就字体加粗

这样写的渲染结果就是产品1和产品2的名称会加粗，当然你也可以这么写，渲染结果是一样的

• 需求3：写一个按钮组，点击高亮

结语

用法差不多就是这么多了，对于vue初学者，前期建议啃一啃文档，后期可以带着问题有针对性的去深入理解文档，在你对vue的用法越来越熟练的时候你就会觉得之前写的全是屎