526互联

Vue动态添加style样式

发布时间 2023-11-01 17:29:55作者: 逍遥云天

最近在用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。