Vue JS – Add Class To Element On Click Tutorial Example

Vue JS – Add Class To Element On Click Tutorial Example

Vue js add class on elements example tutorial. In this tutorial, you will learn 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 or current navigation menu in vue js.

This tutorial will guide you step by step on how to add class on an element using on click in Vue js. And as well as. how to add active class li OnClick navigation menu item in Vue js.

How to Add Class on Elements in vue js

This tutorial will show you 3 examples of 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>

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>

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.

Recommended VUE JS Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *