绑定条件类和 var 类 - VueJS答案

【问题标题】：Bind conditional class and var class - VueJS绑定条件类和 var 类 - VueJS
【发布时间】：2019-06-20 19:40:45
【问题描述】：

鉴于道具：

someBool = true;
someString = 'set-class'

当someBool 为真时，这会将conditional-class 作为一个类添加到元素中：

v-bind:class="{'conditional-class': someBool}"

这会将set-class作为一个类添加到元素中：

v-bind:class="someString"

如何混合使用这两种语法？

试过了：

v-bind:class="{'conditional-class': someBool}" v-bind:class="someString"

结果：Vue 不支持重复绑定

试过了：

v-bind:class="[someString, {'conditional-class': someBool}]"

结果：仅添加“条件类”。即使顺序颠倒。

试过了：

v-bind:class="{'conditional-class': someBool, someString: true}"

结果：将 someString name 视为字符串，class 变为 conditional-class someString

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以使用一些 ES2015 魔法来创建计算属性名称：

:class="{'conditional-class': someBool, [someString]: true}"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

或者，您已经尝试过的事情之一应该可以工作：

:class="[someString, {'conditional-class': someBool}]"

这在此处明确记录：

https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

我尝试过旧版本的 Vue，但它似乎已经支持了很长时间。

这里展示了这两种技术：

new Vue({
  el: '#app',

  data () {
    return {
      someBool: true,
      someString: 'class2'
    };
  }
});

.class1 {
  border: 1px solid red;
  padding: 5px;
}

.class1::before {
  content: 'I have class1';
}

.class2 {
  background: #eef;
  margin: 5px;
}

.class2::after {
  content: ' & class2';
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <div :class="{class1: someBool, [someString]: true}"></div>
  <div :class="[someString, {class1: someBool}]"></div>
</div>

【讨论】：

【解决方案2】：

简答

使用计算：

v-bind:class="someComputed"

computed:{
    someComputed: function(){
        return (this.someBool ? "conditional-class" + " " : "") 
            + this.someString;
    }
}

但是，如果其他人摸不着头脑，这确实是一种解决方法。 OP 正在寻找绑定内的混合，或者从有能力确定的人那里寻找确定的“这不是不能做到的”。

【讨论】：