vue 行间绑定样式的小技巧 :style=

vue 行间绑定样式的小技巧

最简单的

<div :style="{color:"#ff0000",'margin-top':marTop,backgroundColor:conBgColor,'font-size':isFont?'10px':'0px'}">哈哈哈</div>
marTop 和 conBgColor是变量哈
'font-size':isFont?'10px':'0px'也是三目的写法

三目运算符的

<div :style="marTop?'color:#333':'color:red'">哈哈哈</div>
<div :style="'font-size':sizePX+'px'">哈哈哈</div>

marTop 和sizePX是变量哈

组合版

<div :style="[marTop?'color:#333':'color:red',{color:"#ff0000"}]">哈哈哈</div>
marTop 是变量哈
这样就可以瞎玩了