A common need for data binding is manipulating an element's class and its styles. For such cases, you can use v-bind:class
. This can be used to apply classes conditionally, toggle them and/or apply many of them using one bound object et al
.
The v-bind:class
directive takes an object with the following format as an argument:
{ 'classA': true, 'classB': false, 'classC': true }
And applies all classes with the true
value to the element. For example, the classes of the following element will be classA
and classC
:
<div v-bind:class="elClasses"></div> data: { elClasses: { 'classA': true, 'classB': false, 'classC': true } }
To demonstrate how v-bind
is used with the class attributes, we are going to make an example of class toggling. Using the v-bind:class
directive, we are going to dynamically toggle the class of the body...