3vue 绑定style

 

<div
:style="{color:colorSX, fontSize:sizeSX, background: isRed ? '#FF0000' : ''}">
hi vue
</div>

 

从以上代码，我们可知，

1.动态绑定style 前面有v-bind: 

2.color 和 fontSize等，都可以直接书写 。 colorSX 和 sizeSX , 是data中的属性值， 如下所示

3.background，为三元运算，如果isRed为true ，则展示红色，否则无色。 

 

data : {
colorSX : "#FFFFFF",
sizeSX : '50px',
isRed : true
}

图片效果为