VUE 爬坑之旅--class 动态绑定的几种写法

在 vue 中，class 动态绑定是一个很常见的需求，平时的使用频率也很高，今天就来说说 class 绑定的几种写法。

首先，放出镇楼神器：官方文档

文档里面第一个说的是对象语法，也就是在 data 对象里面定义一个属性，然后在 :class 中引入这个属性，这样当属性变化的时候，class 就会相应的变化，而且还可以使用计算属性来处理复杂的逻辑。
特性是很好，但是我在实际项目开发的时候基本没用过这个对象语法的特性，主要是因为我觉得 data 里面应该是放数据相关的，把 class 放里面不太好，再有一点就是我目前还没有碰到很复杂的样式判断逻辑，所以也没必要使用计算属性。

我今天要写的其实是文档中说到的数组语法，这是我在项目中用的比较多的方法，这其中又分几种情况，下面一一道来。

根据某个状态或条件加载某个 class

这种使用场景就是在原有 class 的基础上，通过某个状态或者条件来判断是否要追加 class，语法为：

:class='{'要加载的class':加载此class需要的条件}'

示例代码：

                <div class = "item unselected"
                     @click = "selectPrice(item)"
                     :class = "{'selected':item.selected}"
                     v-for = "item in prices"
                     v-if = "showDefaultPeriod">

                </div>

三元表达式

在上面的用法中，有时候会发现后面的样式并没有正确的覆盖前面的样式，问题的原因我还没找到，不过我找到了解决问题的办法，那就是使用三元表达式来绑定样式。
语法：

:class='[条件 ？ '条件为真时加载的class' : '条件为假时加载的class']'

示例代码：

                <div :class = "[item.selected ? 'item selected':'item unselected']"
                     v-for = "item in prices"
                     v-if = "showDefaultPeriod">

                </div>

使用三元表达式，根据条件不同加载不同的class，就不会出现class覆盖不正确的问题。

三元表达式结合数组

官方文档上有说过，样式绑定可以使用数组语法，数组语法的基本使用请看文档，这里说下数组怎么集合三元表达式来使用，文档上没有说，但这个用法其实还是挺实用的。
语法：

:class='[[条件1 ？'class1' : 'class2'],{'class3' : 条件2},'class4',...]'

示例代码：

<div :class = "[[item.expand?expandClass:collapseClass],{'b0': index === qaCount -1}]">{{item.title}}</div>

数组语法里面可以写很多条件，根据不同的条件加载不同的class，当然，这是理论上可行的，实际项目中不建议这样做，这样做的话将降低代码的可读性，如果真的是条件比较复杂，还是使用对象语法和计算属性吧，保持代码整洁和良好的可读性也是很重要的。