[Vuejs]-How to use active class in vue js

Using string interpolation;

<div :class="`${isActive ? activeClass : 'red'}`">
    Phone OTP
</div>

This allows you to add non-dynamic classes in the future

There are multiple workarounds to achieve this as per the documentation, One of them is binding to an object.

<div :class="classObject"></div>

And as per the logic, You can dynamically update it with the help of computed property.

data() {
  return {
    isActive: true
  }
},
computed: {
  classObject() {
    return {
      'activeClass': this.isActive,
      'red': !this.isActive
    }
  }
}