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-ade47834="">1<h1>

<style scoped>

h1[data-v-ade47834} {

  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>>