vue 动态绑定class总结

在网上的vue动态修改class，基本上都是这种方式：

<div v-bind:class="{ active: isActive }"></div>

或者

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

这种方式有个很大的弊端，就是必须先将active这个.active的css先写到:class里，假设我们有个需求是item的a属性是1在用.xx-1，是2则用.xx-2。。。

那么上面的写法就很蛋疼了，我们可以这样：

:class="'always-need xx-' + item.a"

这种方式可以让item的值来决定用什么class，而不是只能true、false来决定是否显示事先就设定好的内容；

item还可以携带css的class，比如是属性b，就可以写成

:class="'always-need ' + item.b"