How to bind style style in vue dynamically

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.