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
Recommended:-Vue Js For Loop (v-for) Example Tutorial
Recommended:-Vue Js If Else Condition Tutorial
Recommended:-Laravel 8 Vue JS Post Axios Request Tutorial
Recommended:-Laravel 8 Vue JS File Upload Tutorial Example
Recommended:-Laravel 8 Vue JS Live Search Example
Recommended:-Laravel 8 Vue Js Infinity Page Scroll Example
Recommended:-How to implement Datatables with Vuejs And Laravel 8
Recommended:-Laravel 8 Vue JS CRUD App
Recommended:-Vue JS And Laravel 8 Like Dislike Tutorial Example
Recommended:-Laravel 8 Vue JS Full Calendar Tutorial Example
