Example Analysis of binding between Class and Style in Vue.js

This article mainly introduces the Vue.js Class and Style binding example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Vue.js Class binds to Style

A common requirement for data binding is the class list of operation elements and its inline style. Because they are all attribute, we can process them with v-bind; we just need to evaluate the final string of the expression. However, string concatenation is troublesome and error-prone. Therefore, when v-bind is used for class and style, Vue.js specifically enhances it. The result type of an expression can be an object or an array in addition to a string.

Bind HTML Class object syntax

We can pass an object to v-bind:class to switch class dynamically. Note that v-bind:class instructions can coexist with normal class features.

Title new Vue ({el:'# example', data: {isRipe: true, isNotRipe: false}})

When isRipe and isNotRipe change, the class list is updated accordingly. For example, if isNotRipe becomes true, the class list will change to "static didi-orange didi-green".

Note: although you can bind class with Mustache tags, such as class= "{{className}}", it is not recommended to mix this with v-bind:class.

We can also bind an object in the data directly.

Title new Vue ({el:'# example', data: {ddfe: {isRipe: true, isNotRipe: false})

You can also bind a calculation property of the returned object here.

Title new Vue ({el:'# example', data: {didiAge: 4, didiMember: 6000}, computed: {ddfe: function () {return {'didi-orange': this.didiAge > 3 'didi-large': this.didiMember > 1000}})

Array syntax

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

Title new Vue ({el:'# example', data: {didiHandsome: 'didiHandsome', didiBeautful:' didiBeautful'}})

Bind inline style object syntax

The object syntax of v-bind:style is very straightforward-it looks a lot like CSS, but it is actually a JavaScript object. The CSS attribute name can be named with a hump or a short horizontal separation.

Title new Vue ({el:'# example', data: {didiColor: 'orange', fontSize: 30}})

It is usually better to bind directly to a style object to make the template clearer.

Title new Vue ({el:'# example', data: {ddfe: {color: 'orange', fontSize:' 13px'}})

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

Title new Vue ({el:'# example', data: {didiAge: 4, didiMember: 6000}, computed: {ddfe: function () {return {color: this.didiAge > 3? 'orange':' green', fontSize: this.didiMember > 1000? '20pxregions:' 10px'}})

Array syntax

V-bind:style 's array syntax allows you to apply multiple style objects to an element.

Add prefixes automatically

When v-bind:style uses a CSS property that requires a browser engine prefix, such as transform,Vue.js, it automatically detects and adds the appropriate prefix.

Mainstream browser engine prefix:

Webkit (Google, Safari, the new version of Opera, and browsers in almost all iOS systems (including Firefox in iOS); basically all browsers based on the WebKit kernel)

Moz (Firefox browser)

O (legacy Opera browser)

Ms (IE browser and Edge browser)

Thank you for reading this article carefully. I hope the article "sample Analysis of binding between Class and Style in Vue.js" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!