vue中动态添加style样式的几种写法总结

　　目录

　　vue动态添加style样式总结

　　项目中可能会需要动态添加 style 行内样式，但是在长期维护的项目里面，尽量要避免使用。

　　注意：

　　1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize。

　　2、除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff。

　　对象

　　html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

　　html :style="{color:(index==0?conFontColor:'#000')}"

　　数组

　　html :style="[baseStyles, overridingStyles]"

　　html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

　　三目运算符

　　html :style="{color:(index==0?conFontColor:'#000')}"

　　html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

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

　　html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

　　绑定data对象

　　html :style="styleObject"

　　data() {

　　return{

　　styleObject: {

　　color: 'red',

　　fontSize: '13px'

　　}

　　}

　　}

　　vue3的style样式的特性

　　scoped 属性

　　定义的 CSS 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。

　　我们项目中的样式也可以加上如下标签：

　　>

　　点击累加器时文本颜色的切换效果，如下图所示：

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

　　您可能感兴趣的文章: