How to toggle a class in Vue
In this post we will give you information about How to toggle a class in Vue. Hear we will give you detail about How to toggle a class in VueAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to dynamically toggle a class in Vue.js with the help of examples.
Toggling the classes
We can toggle a class dynamically in vue by passing an object to the v-bind:class attribute.
In this example, we are toggling a class by clicking the Toggle button.
<template> <div id="app"> <div v-bind:></div> <button @click="handleToggle">Toggle</button> </div></template><script>export default { data() { return { isActive: true }; }, methods: { handleToggle() { this.isActive = !this.isActive; } }};</script>
In the above code, we have passed {box: isActive} to v-bind:class attribute, where box class will be added to div element if the isActive data property is true; otherwise it is removed.
If you click on a Toggle button the box class is removed, and toggle it again box class is added.
You can also pass multiple classes like this.
<template> <div id="app"> <div v-bind:></div> <button @click="handleToggle">Toggle</button> </div></template><script>export default { data() { return { isActive: true, isError: false }; }, methods: { handleToggle() { this.isActive = !this.isActive; this.isError = !this.isError; } }};</script>
It will render:
<div ></div>
After clicking the toggle button:
<div ></div>
Using the Array syntax
Similarly, we can also toggle classes by passing an array to the v-bind:class attribute.
<template> <div id="app"> <div v-bind:></div> <button @click="handleToggle">Toggle</button> </div></template><script>export default { data() { return { isActive: true, }; }, methods: { handleToggle() { this.isActive = !this.isActive; } }};</script>
In the above code, we have used a ternary operator (?) inside the array, where box class is added to div element if an isActive data property is true, otherwise empty string ‘ ‘ is added.
You can also pass multiple classes by using an object syntax inside the array syntax.
<template> <div id="app"> <div v-bind:></div> <button @click="handleToggle">Toggle</button> </div></template><script>export default { data() { return { isActive: true, isError: false }; }, methods: { handleToggle() { this.isActive = !this.isActive; } }};</script>
Hope this code and post will helped you for implement How to toggle a class in Vue. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs