Vue.js Getting Started Tutorial binding class and style style _javascript tips

First, the preface

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

Second, bound HTML Class

Please note that although you can bind class with the mustache tag, for example class="{{ className }}" , we do not recommend this type of writing and v-bind:class mixing. The two can only choose one!

Object syntax

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

<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 true,class, the list 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 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.

Second, bound inline style

Object syntax

v-bind:styleThe object syntax is intuitive-it looks very much like CSS, but it is 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.

Three, array syntax

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 using CSS attributes that require vendor prefixes, such as transform,vue.js automatically detects and adds the appropriate prefix.

Iv. Summary

The above is for everyone to organize the Vue.js binding class and style of the entire content, the article introduced very detailed, with a certain reference learning value, hope to learn vue.js can help, small series will be updated on vue.js information, interested friends Please continue to pay attention to cloud habitat community.