Bind multiple classes with one condition in Vue

user_2324388 0
Viewed 5490

For example, I had expected something like this to work in that way with using a single condition and setting an array of classes at once:

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

How can I bind multiple classes with a single condition in Vue without using an extra function?

vue.js bind data-binding class
2 Answers

This should work:

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

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>

user_73759610
Related