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

Posted 2023-03-06

【中文标题】在Vue中用一个条件绑定多个类[重复]

【英文标题】：Bind multiple classes with one condition in Vue [duplicate]

【发布时间】：2020-06-26 17:59:07

【问题描述】：

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

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

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

【参考方案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>