Vue Js Add Class To Element On Click Tutorial

Vue js add class to element on click; Through this tutorial, i am going to show you how to add class (active, inactive, select, toggle, etc) on element using on click in vue js. And as well as, how to add active class li OnClick navigation menu item or current navigation menu in vue js.

How to Add Class on Elements in vue js

I will show you 3 examples on how to add class on elements using on click in vue js:

Example 1 – VueJS Add Class on Elements

See the following example of add class on elements using on click in vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Js Add Class To Element On Clicked Example</title>
  <style>
   .myClass
    {
      box-shadow: 0px 0px 5px #000; 
      background-color: green;
      color: #fff;
      padding: 3px 5px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-5 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>Vue Js Add Class To Element On Clicked</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <div id="app">
                  <button v-on:click="addClass" :class="{'myClass': isAddClass}" class="btn-block">
                      Click Me
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
Vue.config.devtools = true
var vm = new Vue({
    el: '#app',
    data: {
        isAddClass: false,
    },
    methods: {
            addClass: function() {
                this.isAddClass = true;
        }
    }
});
</script>
</body>
</html>

The following code will add class on element using onclick event in vue js:

<script>
  Vue.config.devtools = true
  var vm = new Vue({
      el: '#app',
      data: {
          isAddClass: false,
      },
      methods: {
              addClass: function() {
                  this.isAddClass = true;
          }
      }
  });
</script>

Recommended:-Vue Js If Else Condition Example

Example 2 – VueJS Add active class to main menu

See the following example of add active class to li onclick vue js:

<!DOCTYPE html>
<html>
<head>
  <title>VueJS Add active class to main menu Example</title>
  <style>
    .active {
      color : green;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-5 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>VueJS Add active class to main menu</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
                <div id="myApp">
                <span>{{activeId}}</span>
                <ul >
                  <li v-for="lang in languages">    
                    <button v-bind:class="{ active: (lang.id === activeId) }" v-on:click="selectLang(lang.id)"> 
                    {{ lang.status }}    
                    </button>            
                  </li>
                </ul>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
    new Vue({
      el: '#myApp',
      data: {
        activeId : 0,
        languages: [
          { id :1, status: 'PHP' },
          { id :2, status: 'Python' },
          { id :3, status: 'Java' },
        ]
      },
      methods: {
        selectLang: function (id) {              
        this.activeId = id;
        }
      }
    })
</script>
</body>
</html>

The following code will add active class to main menu in vue js:

<script>
    new Vue({
      el: '#myApp',
      data: {
        activeId : 0,
        languages: [
          { id :1, status: 'PHP' },
          { id :2, status: 'Python' },
          { id :3, status: 'Java' },
        ]
      },
      methods: {
        selectLang: function (id) {              
        this.activeId = id;
        }
      }
    })
</script>

Recommended:-Vue Js For Loop (v-for) Example

Example 3 – Vue js add active class to current navigation menu

See the following example of add active class to current navigation menu in vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue js add active class to current navigation menu Example</title>
  <style>
    .active {
      color : green;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-5 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>Vue js add active class to current navigation menu</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
               <div id="app">
                <div class="jumbotron">
                  <br>
                  <div class="container">
                    <div class="row justify-content-center">
                      <div class="col col-12 align-self-center">
                        <list>
                          <list-item :title="item.title" :content="item.content" v-for="(item, index) in items" :active="index === activeIndex" :index="index" :key="item.title" @set-active="activeIndex = $event"></list-item>
                        </list>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
   //components
let ListItem = {
  template: `  <li class="list-group-item" :class="{'active': active}" @click.stop="toggleActive">
    <h3>{{title}}</h3>
    <p>{{content}}</p>
  </li>`,
  name: "list-item",
  props: ["title", "content", "active", "index"],
  methods: {
    toggleActive() {
      this.$emit("set-active", this.index);
      console.log(this.index);
    }
  }
};
let List = {
  template: `<ul class="list-group list-group-horizontal-sm">
  <slot></slot>
  </ul>
  `,
  name: "list"
};
//vue instance
new Vue({
  el: "#app",
  data: {
    items: [
      { title: "Title 1", content: "Content 1" },
      { title: "Title 2", content: "Content 2" },
      { title: "Title 3", content: "Content 3" },
      { title: "Title 4", content: "Content 4" }
    ],
    activeIndex: 0
  },
  components: { ListItem, List }
});
</script>
</body>
</html>

The following code will add active class to current navigation menu in vue js:

<script>
   //components
let ListItem = {
  template: `  <li class="list-group-item" :class="{'active': active}" @click.stop="toggleActive">
    <h3>{{title}}</h3>
    <p>{{content}}</p>
  </li>`,
  name: "list-item",
  props: ["title", "content", "active", "index"],
  methods: {
    toggleActive() {
      this.$emit("set-active", this.index);
      console.log(this.index);
    }
  }
};
let List = {
  template: `<ul class="list-group list-group-horizontal-sm">
  <slot></slot>
  </ul>
  `,
  name: "list"
};
//vue instance
new Vue({
  el: "#app",
  data: {
    items: [
      { title: "Title 1", content: "Content 1" },
      { title: "Title 2", content: "Content 2" },
      { title: "Title 3", content: "Content 3" },
      { title: "Title 4", content: "Content 4" }
    ],
    activeIndex: 0
  },
  components: { ListItem, List }
});
</script>

Conclusion

vue js add class on elements using onclick example tutorial, you have learned how to add class on element using on click in vue js. And as well as. how to add active class li OnClick navigation menu item in vue js.