Question

给出道具：

someBool = true;
someString = 'set-class'

当conditional-class为true时，这会将someBool作为元素添加到类：

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名称视为字符串，类变为conditional-class someString

Answer 1

简短答案

使用计算所得：

v-bind:class="someComputed"

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

但是，如果其他人抓挠头，那确实是解决方法。 OP正在寻找绑定中的混合体，或者是具有确定能力的人的确定性“不是不可能做到的”。

Answer 2

您可以使用一些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>

绑定条件类和var类-VueJS

2 个答案: