Vue动态添加style样式
最近在用uniapp开发安卓app,由于语法跟vue一致,就梳理了下动态添加style的方法:
Object |
:style="{ fontSize: fontSize + 'px' }" :style="{ fontSize:( fontSize ?fontSize :'12')+'px'}" |
|
Array |
:style="[baseStyles, otherStyles]" :style="[{color:(number==0?fontColor:'#000')},{fontSize:'25px'}]" |
|
三元表达式 |
:style="{color:(number==0?fontColor:'#000')}" :style="[{color:(number==0?fontColor:'#000')}]" |
|
多重值形式 |
:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" |
|
绑定data对象 |
:style="needStyle" data() { return{ needStyle: { color: 'blue', fontSize: '16px' } } } |
注意事项:
1. 凡是css中有 - 的style属性名都要变成驼峰式,比如font-size要变成fontSize、background-color要变成backgroundColor。
2. 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor: '#00a2ff',而不是 backgroundColor: #00a2ff。
个人原创博客,转载请注明来源地址:https://www.cnblogs.com/xyyt