Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to dynamically bind the style style in vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

How to dynamically bind style Styles

Method 1:

(1) in html:

(2) in data:

VideoBox: {width:800, height:500,}

(3) in mounted:

Mounted () {this.videoBox.width=this.$refs.videoMa.offsetWidth; this.videoBox.height=this.$refs.videoMa.offsetHeight;} dynamically set style style

All style attribute names with-should be humped, for example, font-size should become fontSize.

In addition to binding values, the values of other attribute names should be enclosed in quotation marks, such as backgroundColor:'#00a2ff' instead of backgroundColor:#00a2ff

Object

Html: html:

Array

Html: html:

Ternary operator

Html: html:

Multiple value

Html: that's all of the article "how to dynamically bind style styles in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.