how to use active class in vue js-CodePudding

i'm trying to change the text-color when a component is active

here's my template

           <div
           v-if="enabled2FAs.includes('phoneOtp')"
              @click="otpType = 'phoneOtp'"
            >
              <div
                  :>
                Phone OTP
              </div>
            </div>

          <div
           v-if="enabled2FAs.includes('authenticatorApp')"
              @click="otpType = 'authenticatorApp'"
            >
              <div
                  :>
                Phone OTP
              </div>
            </div>

my sxript tag


<script>
export default {
  data() {
    return {
      isActive: true,
    };
  },
 
};
</script>

pleaase how can i go about this

CodePudding user response：

Please take a look at demo, and read more at vue class/style bindings

const app = Vue.createApp({
  data() {
    return {
      isActive: true,
    };
  },
})
app.mount('#demo')

.red {
  color: red;
}
.green {
  color: green;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="isActive = !isActive">toggle</button>
  <div :>
    Phone OTP
  </div>
</div>

CodePudding user response：

Using string interpolation;

<div :>
    Phone OTP
</div>

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