当前位置: 首页 > Web前端 > vue.js

vue08是怎么学的:v-bind动态绑定style属性

时间:2023-03-31 17:40:45 vue.js

label的style不是写死的,是动态绑定的。常用于组件开发。分为两种绑定方式:对象语法和数组语法。对象语法是将对象绑定到样式,数组语法是将数组绑定到样式。对象语法{{message}}对象是键值对的形式:键是属性名,值是属性的值,不是布尔值。该值需要写在引号(字符串)中,否则会被解析成变量名。data中定义了变量,如下:constapp=newVue({el:'#app',data:{message:'Hello',finalSize:100,finalColor:'red',}})ifkey-valuepair比较长,也可以把键值对写到方法里。{{message}}constapp=newVue({el:'#app',data:{message:'Hello',finalSize:100,finalColor:'red',},methods:{getStyles:function(){return{fontSize:this.finalSize+'px',backgroundColor:this.finalColor}}}})数组语法(不常用){{message}}constapp=newVue({el:'#app',data:{message:'Hello',baseStyle:{backgroundColor:'red'},baseStyle1:{fontSize:'100px'},}})