vue动态绑定style
1、对象语法
<h2 :style='{key(属性名):value(属性值)}'>{{message}}</h2>
//50px必须加上单引号,否则是当作一个变量去解析
<h2 :style='{fontSize:'50px'}'>{{message}}</h2>
//finalSize当成一个变量使用
<h2 :style='{fontSize:finalSize}'>{{message}}</h2>
<h2 :style='getStyles()'>{{message}}</h2>
data(){
finalSize:'100px',
finalSize1:100,
finalColor:'red'
}
methods:{
getStyles:function(){
return {fontSize:this.finalSize1+'px',color:this.finalColor}
}
}
2、数组语法
<h2 :style='[baseStyle]'>{{message}}</h2>
data(){
baseStyle:{backgroundColor:'red'}//可以写多个
}