Class and style binding that you must learn every day in Vue.js

A common requirement for data binding is to manipulate the element's class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we just need to evaluate the final string of the expression. However, string concatenation is cumbersome and error-prone. Therefore, Vue.js specifically enhances v-bind when used with classes and styles. In addition to strings, the result type of an expression can also be an object or an array.

Binding HTML Class

Although you can use Mustache tags to bind classes, such as `{% raw %}class=”{{ className }}”{% endraw %}`, but we It is not recommended to mix this writing method with `v-bind:class`. You can only choose one of the two!

Object syntax

We can pass v-bind:class an object to dynamically switch classes. Note that the v-bind:class directive can coexist with the normal class attribute:

<div class="static" v-bind:class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB }"></div>
 
data: {
 isA: true,
 isB: false
}

Rendered as:

99d51369971cdd131f2a9bd749fc570d 16b28748ea4df4d9c2150843fecfba68

When isA and isB change, the class list will be updated accordingly. For example, if isB becomes true, the class list becomes "static class-a class-b".

You can also directly bind an object in the data:

<div v-bind:class="classObject"></div>
 
data: {
 classObject: {
 &#39;class-a&#39;: true,
 &#39;class-b&#39;: false
 }
}

We can also bind a computed property of the returned object here. This is a commonly used and powerful pattern.

Array syntax

We can pass an array to v-bind:class to apply a class list:

<div v-bind:class="[classA, classB]">
 
data: {
 classA: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}

Rendered as:

95d66a4b96383bd3e82abe8c8e40596f16b28748ea4df4d9c2150843fecfba68

If you also want to switch classes in the list based on conditions, you can use a ternary expression:

19de9f32bc61168916c704eb219bf5b9

This example always adds classA, but only adds classB when isB is true .

However, it is a bit cumbersome to write like this when there are multiple conditional classes. In 1.0.19+, you can use object syntax within array syntax:

5e8eb295b79d324df5d621d3d0eaa446

Bind inline style

Object syntax

The object syntax of v-bind:style is very intuitive - it looks very like CSS, but in fact it is a JavaScript object. CSS property names can be camelCase or kebab-case:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>
 
data: {
 activeColor: &#39;red&#39;,
 fontSize: 30
}

It is usually better to bind directly to a style object, making the template clearer:

<div v-bind:style="styleObject"></div>
 
data: {
 styleObject: {
 color: &#39;red&#39;,
 fontSize: &#39;13px&#39;
 }
}

Similarly, object syntax is often used in conjunction with computed properties that return objects.

Array syntax

The array syntax of v-bind:style can apply multiple style objects to one element:

cc9ceed1b5eb9f9342f97e001603e964

Automatically add prefix

When v-bind:style uses CSS properties that require vendor prefixes, such as transform, Vue.js will automatically detect and add the corresponding prefix.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to Class and style binding that you must learn every day in Vue.js, please pay attention to the PHP Chinese website!