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
}

图片效果为

 

posted on 2019-10-09 16:28  执着的烙印  阅读(269)  评论(0编辑  收藏  举报

导航