vue之组件动态添加style样式的四种写法（齐全）

题记：

根据情况来更改样式的情况非常普遍，下边就是最全的使用锦集！

一： 对象

"{ color: activeColor, fontSize: fontSize + 'px' }">
 
<div :style="{color:(index===0?worldColor:'#000')}">div>

二： 数组

"[listStyle, otherStyles]">
 
<div :style="[{color:(index===0?worldColor:'#eee')},{fontSize:'10px'}]">div>

三： 三目表达式

"{color:(index===0?worldColor:'#eee')}">
 
<div :style="[{color:(index===0?worldColor:'#eee')},{fontSize:'10px'}]">div>

四：绑定data对象

"styleObject">
 
data() {
    return{
      styleObject: {
        color: 'pink',
        fontSize: '10px'
      }  
    }
}

多重值(浏览器会根据运行支持情况进行选择)

"{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">

使用

我们经常会遇到我们进入的页面由于角色的不同导致样式的不同，那么跳转时候携带变量过去进行判断然后给相应的样式即可！