How To Toggle Class In Vue js 3 ? – Step By Step Guide

Vue.js is an open-source model–view–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Toggle Class In Vue js 3

You could have the active class be dependent upon a boolean data value in vue js

Example

<template>
  <div>

    <p :class="{ show: toggle }">lorem ubsum</p>
    <button v-on:click="toggle = !toggle">click me</button>

  </div>
</template>

<script>

export default {
  name: "App",

  data() {
    return {
      toggle: false,
    };
  },

};
</script>