Vue.Js toggle Class on click
Vue.Js toggle Class on click – It is very simple to toggle the class in vue.js. Here in this tutorial, we are going to explain how you can toggle class in Vue.js. You can also use our online demo to run and see the output online.
Vue.Js toggle Class on click Example
You can toggle the class in vue.js simply as below-
Vue.Js toggle Class on click Example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<div id="myDiv"
v-bind:class="{ active: myClass }"
v-on:click="myClass = !myClass">
CLick me
</div>
Active Class = {{myClass}}
</div>
<script>
var App = new Vue({
el: '#app',
data: {
myClass: false
}
});
</script>
</body>
</html>
|
In the above example the active class is applied based on click event. You can use the above code on other events as well. If you run the above example it will produce output something like this-
Advertisements
