Vue中动态添加style的多种实现方法有哪些？

本文共计749个文字，预计阅读时间需要3分钟。

目录 + Vue动态添加style样式总结 + 对象 + 数组 + 三目运算符 + 多重值（浏览器会根据运行支持情况选择） + 绑定data对象 + Vue3的style样式特性 + scoped属性 + 在scoped内部，写全局样式 + 通过v-bind+函数

目录

• vue动态添加style样式总结
• 对象
• 数组
• 三目运算符
• 多重值(浏览器会根据运行支持情况进行选择)
• 绑定data对象
• vue3的style样式的特性
• scoped属性
• 在 scoped 内部，写全局的样式
• 通过v-bind 函数，在 CSS 中使用 JavaScript 中的变量

vue动态添加style样式总结

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

注意：

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

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