在Vue中用一个条件绑定多个类[重复]答案

【问题标题】：Bind multiple classes with one condition in Vue [duplicate]在Vue中用一个条件绑定多个类[重复]
【发布时间】：2020-06-26 17:59:07
【问题描述】：

例如，我曾期望这样的事情能够以这种方式使用单个条件并一次设置一个类数组：

<div v-bind:class="{['bg-red-500','bg-white']:isActive}">
...
</div>

如何在 Vue 中使用一个条件绑定多个类而不使用额外的函数？

【问题讨论】：

标签： class vue.js data-binding bind

【解决方案1】：

这应该可行：

<div :class="[isActive ? ['bg-red-500','bg-white'] : '']">
 ...
</div>

【讨论】：

【解决方案2】：

new Vue({
  el: '#app',
  
  data: {
    isActive: false
  }
})

button {
  outline: none;
}

.class-1 {
  border: 1px solid red;
}

.class-2 {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <button 
    :class="{
      'class-1': this.isActive,
      'class-2 ': this.isActive
    }"
    @click="isActive = !isActive"
  >
    set active
  </button>
  
  // OR
  
  <button 
    :class="isActive ? ['class-1', 'class-2'] : []"
    @click="isActive = !isActive"
  >
    set active
  </button>

</div>

【讨论】：