Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

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

2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report