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

这篇文章主要介绍了vue中动态添加style样式的几种写法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 目录

推荐整理分享vue中动态添加style样式的几种写法总结(vue中动态添加表格)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue动态添加dom,vue 动态添加,vue中动态添加样式,vue中动态添加参数,vue 动态添加,vue中动态添加样式,vue中动态添加输入框并上传图片,vue中动态添加样式,内容如对您有帮助，希望把文章链接给更多的朋友！

vue动态添加style样式总结对象数组三目运算符多重值(浏览器会根据运行支持情况进行选择)绑定data对象vue3的style样式的特性scoped属性在 scoped 内部，写全局的样式通过v-bind 函数，在 CSS 中使用 JavaScript 中的变量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 就只会应用到当前组件的元素上，这样就很好地避免了一些样式冲突的问题。

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

<style scoped>h1 {color: red;}</style>>

这样，组件就会解析成下面代码的样子。标签和样式的属性上，新增了 data- 的前缀，确保只在当前组件生效。

<h1 data-v-3de47834="">1</h1><style scoped>h1[data-v-3de47834] {color: red;}</style>在 scoped 内部，写全局的样式

可以用:global 来标记，这样能确保你可以很灵活地组合你的样式代码

通过v-bind 函数，在 CSS 中使用 JavaScript 中的变量<template><div><h1 @click="add">{{ count }}</h1></div></template><script setup>import { ref } from "vue";let count = ref(1)let color = ref('red')function add() {count.value++color.value = Math.random()>0.5? "blue":"red" // 随机生成一个0-1之间点数字}</script><style scoped>h1 {// v-bind 函数绑定 color 的值color:v-bind(color);}</style>>

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

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