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

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'] }"

html :style="styleObject"
 
data() {
    return{
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }  
    }
}

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

<h1 data-v-3de47834="">1</h1>
<style scoped>
h1[data-v-3de47834] {
    color: red;
}
</style>

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