Vue js Toggle class / add / remove class
In Vue.js, the v-bind:class
directive allows you to bind one or more CSS classes to an element's class attribute. This can be useful for dynamically adding or removing classes based on the component's state or props. The value of the directive should be an object, where the keys are the class names, and the values are Boolean expressions that determine whether the class should be added or removed.
Thanks for your feedback!
Your contributions will help us to improve service.
How to Add or Remove Class to an element in Vue Js
we can use v-bind:class
directive to bind one or more CSS classes to an element's class attribute, and determine whether the classes should be added or removed based on the component's state or props.
In this example, the active
class will be added to the div
element if the isActive
data property is true, and removed if it is false.
Output of above example
Before Toggle Class
After Toggle Class