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

本文主要是介绍vue之组件动态添加style样式的四种写法（齐全），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

题记：

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

一： 对象

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

二： 数组

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

三： 三目表达式

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

四：绑定data对象

<div :style="styleObject"></div>data() {return{styleObject: {color: 'pink',fontSize: '10px'}  }
}

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

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

使用

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

这篇关于vue之组件动态添加style样式的四种写法（齐全）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---