Vue 3 - Binding multiple classes to one condition

Question

From the docs, it shows that we can bind classes to conditions like so:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

What if I want to bind two classes to the same condition, would this work? Would there be a shorter way?

<div
  class="static"
  :class="{ active: isActive,  active: isSelectable }"
></div>

Answer 1

If I understand you correctly you want to bind multiple classes to the same condition. There's nothing preventing you from doing it like this if you wanted to ..

<div
  class="static"
  :class="{ 'class-1 class-2': condition }"
></div>

Answer 2

You can use || and && to combine conditions:

   <div
      class="static"
      :class="{ active: isActive || isSelectable }"
    ></div>