vuejs

7. Class and Style Bindings
7.1 Class binding
7.1.1 Object Syntax
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 binded object et al.
The v-bind:class directive takes an object with the following format as an argument
1 {
2 'classA': true,
3 'classB': false,
4 'classC': true
5 }
and applies all classes with true value to the element. For example, the following element will have
classA and classC classes.
1
1 data: {
2 elClasses:
3 {
4 'classA': true,
5 'classB': false,
6 'classC': true
7 }
8 }
To demonstrate how v-bind is used with class attributes, we are going to make an example of
class toggling. Using v-bind:class directive, we are going to dynamically toggle the class of body
element.
83