Vue Bind Css

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.

In addition to strings, the expressions can also evaluate to objects or arrays.

We can pass an object to v-bind:class to dynamically toggle classes:.
The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.

You can have multiple classes toggled by having more fields in the object.

v-bind:class="{'disabled': !(searchItem || category)}"

In addition, the v-bind:class directive can also co-exist with the plain class attribute.

:class="{'disabled': !(searchItem || category)}"

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:.
Maverick FabroaMaverick Fabroa

Some things you should know…