Detailed explanation of how v-bind dynamically binds style attributes

How does v-bind dynamically bind the style attribute? This article will give you a detailed understanding of the various syntaxes of the v-bind instruction to dynamically bind style attributes. I hope it will be helpful to you!

#v-bind can dynamically set the style attribute to bind inline styles. Writing method:

<!--完整写法-->
<标签名 v-bind:style="vue实例中的数据属性名"/>

<!--简化写法-->
<标签名 :style="vue实例中的数据属性名"/>

1. v-bind dynamically binds the inline style attribute (object syntax)

After dynamically binding the class attribute, The value of class is a variable, which can be placed in data to dynamically bind the style. (Learning video sharing: vue video tutorial)

1. The object syntax of v-bind:style is very similar to CSS syntax, but it is actually a JavaScript object

:style="{key(属性名):value(属性值)}"

When writing CSS property names, such as font-size

• , you can use camel case (camelCase): fontSize

• or dash separated (kebab-case, remember to enclose it in single quotes): 'font-size'

<h2 :style="{fontSize:&#39;50px&#39;}">{{message}}</h2>
<h2 :style="{&#39;font-size&#39;:&#39;50px&#39;}">{{message}}</h2>

Note: If you do not use camel case naming, you must add single quotes, because once the vue syntax is bound, it will not add single quotes inside The string is treated as a variable name, even 50px will be treated as a variable name, so if it is a string, single quotes must be added.

value (attribute value) has two implementations: wrapped in quotes or not wrapped in quotes

• When the value is quoted, when Vue is parsing, Treat it as a fixed value. For example, when the "50px"

• value in the above example is not enclosed in double quotes, it is treated as a variable and Vue parses it into a variable. The variable value will be in Find

<div id="app">
	<!-- 如下：finalSize当成一个固定值来使用 -->
	<h2 :style="{fontSize:&#39;50px&#39;}">{{message}}</h2> 
	
	<!-- 如下：finalSize当成一个变量来使用，通过data动态绑定 -->
	<h2 :style="{fontSize: finalSize + &#39;px&#39;, backgroundColor: finalColor }">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el: "#app",
    data: {
        message: &#39;你好啊！&#39;,
        finalSize: 100,
        finalColor: &#39;red&#39;
    }
})
</script>

in data. 2. It is usually better to bind directly to a style object, which will make the template clearer:

<div id="app">
	<!-- 如下：绑定到一个样式对象styleObject，对象中设置对个key:value对 -->
	<h2 :style="styleObject">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el: "#app",
	data: {
		message: &#39;你好啊！&#39;,
	        styleObject: {
			color: &#39;red&#39;,
			fontSize: &#39;50px&#39;,
			backgroundColor: &#39;pink&#39;
		}
	}
})
</script>

3. You can also bind a calculated property of the returned object

<div id="app">
	<!-- 如下：绑定一个返回对象的计算属性 -->
	<h2 :style="styleObject">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el: "#app",
	data: {
		message: &#39;你好啊！&#39;,
		color: &#39;red&#39;,
		fontSize: &#39;50px&#39;
	},
	computed: {
	  styleObject: function () {
		return {
		  color:this.color, fontSize:this.fontSize
		}
	  }
	}

})
</script>

Object syntax is often used in conjunction with the calculated properties of the returned object to implement style switching

Example: switching between red and black colors

<div id="app">
	<span :style="styleObj" @click="handleFontColor">Hello World</span>
</div>

<script>
	var vm = new Vue({
		el: &#39;#app&#39;,
		data: {
			styleObj: {
				color: &#39;red&#39;
			}
		},
		methods: {
			handleFontColor(){
				this.styleObj.color === &#39;red&#39; ? this.styleObj.color = &#39;black&#39; : this.styleObj.color = &#39;red&#39;
			}
		}
	})
</script>

2. v-bind dynamically binds inline style attributes (array syntax)

v-bind uses array method to dynamically bind style. It is less commonly used. The usage is: first in vue Write the style to be used in the instance data part, and then use array binding where you want to use v-bind dynamic binding. The array includes the style name defined in vue.

The array syntax format is:

:style="[base1,base2]"

The array syntax of v-bind:style can apply multiple style objects to the same element:

<div id="app">
	<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: &#39;你好啊！&#39;,
            baseStyle: { backgroundColor: &#39;red&#39; },
            baseStyle1: { fontSize: &#39;100px&#39; },
        }
    })
</script>

Automatically add prefix: When v-bind:style uses CSS attributes that require the browser engine prefix, such as transform, Vue. js will automatically detect and add the corresponding prefix.

3. v-bind dynamically binds the inline style attribute (multiple values)

can be bound to style The specified attribute provides an array containing multiple values, which is often used to provide multiple prefixed values ​​

<div :style="{ display: [&#39;-webkit-box&#39;, &#39;-ms-flexbox&#39;, &#39;flex&#39;] }"></div>

Writing like this will only render the last value in the array supported by the browser.

In this example, if the browser supports flexbox without the browser prefix, then only display: flex will be rendered.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of Detailed explanation of how v-bind dynamically binds style attributes. For more information, please follow other related articles on the PHP Chinese website!