For v3.x, click here. A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we only need to calculate a final string with our expressions.
However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when v-bind is used with class and style.
You can have multiple classes toggled by having more fields in the object. In addition, the v-bind:class directive can also co-exist with the plain class attribute.
So given the following template:. And the following data:. It will render:. When isActive or hasError changes, the class list will be updated accordingly.
For example, if hasError becomes true, the class list will become "static active text-danger".
The bound object doesn’t have to be inline:.