Vue Class Style Component Syntax

Posted on  by admin
You’re browsing the documentation for v2.x and earlier.

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:.

This will render the same result.

Step 1 — Setting Up the Project