Vue.js class and style binding _javascript skills every day

A common requirement for data binding is the class list of action elements and its inline style. Because they are all attributes, we can use V-bind to deal with them: only the final string of the expression is computed. However, string concatenation is cumbersome and error-prone. As a result, vue.js specifically enhances v-bind when it is used for class and style. The result type of an expression can be an object or an array, in addition to a string.

Binding HTML Class

Although you can bind class with the mustache tag, such as ' {% raw%}class= ' {ClassName}} ' {% Endraw%} ', we do not recommend this notation and ' v-bind:class ' blending. The two can only choose one!

Object syntax

We can pass to v-bind:class an object to dynamically switch class. Note that the V-bind:class directive can coexist with ordinary class attributes:

<div class= "Static" v-bind:class= "{' class-a ': IsA, ' class-b ': IsB}" ></div>

data: {
 isa:true,
 Isb:false
}

Render as:

<div class= "Static Class-a" ></div>

When IsA and IsB change, the class list is updated accordingly. For example, if IsB becomes a true,class list, it changes to "static Class-a class-b."

You can also directly bind an object in the data:

<div v-bind:class= "Classobject" ></div>

data: {
 classobject: {
 ' class-a ': true,
 ' Class-b ': False
 }
}

We can also bind a computed property of the returned object here. This is a common 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: ' class-a ',
 classb: ' Class-b '
}

Render as:

<div class= "Class-a class-b" ></div>

If you also want to toggle the class in the list according to the criteria, you can use the ternary expression:

<div v-bind:class= "[ClassA, IsB? CLASSB: ']" >

This example always adds ClassA, but adds CLASSB only if IsB is true.

However, this is a bit cumbersome to write when you have more than one condition class. In 1.0.19+, object syntax can be used in array syntax:

<div v-bind:class= "[ClassA, {CLASSB:ISB, classc:isc}]" >

Bound inline style

Object syntax

V-bind:style's object syntax is intuitive-it looks very much like CSS, but it's a JavaScript object. A CSS property name can be named with a hump (CamelCase) or a short horizontal partition (Kebab-case):

<div v-bind:style= "{color:activecolor, fontsize:fontsize + ' px '}" ></div>

data: {
 activecolor: ' Red ',
 fontsize:30
}

Directly binding to a style object is usually better and makes the template clearer:

<div v-bind:style= "Styleobject" ></div>

data: {
 styleobject: {
 color: ' Red ',
 FontSize: ' 13px '
 }
}

Similarly, object syntax is often used in conjunction with the computed properties of the returned object.

Array syntax

The V-bind:style array syntax can apply multiple style objects to an element:

<div v-bind:style= "[Styleobjecta, STYLEOBJECTB]" >

Add prefix automatically

When V-bind:style uses CSS attributes that require vendor prefixes, such as transform,vue.js automatically detects and adds the appropriate prefix.

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.