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

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
844

Some things you should know…