vue3 style 中 v-bind 终于可以使用了，非常好用，如下：

首先style v-bind 在绑定对象使用

<template>

  <div class="mode">

    我是mode组件

  </div>

  <button @click="handleClick">点我更改颜色</button>

</template>

<script setup>

import { reactive } from 'vue'

const state = reactive({

  color:'#ddd'

})

const handleClick = () => {
  state.color = '#f00'
}

</script>

<style scoped>

.mode {
  // 对象使用需要使用字符串写入，要不然报错
  color: v-bind('state.color')

}

</style>

基本数据类型使用

<template>

  <div class="mode">

    我是mode组件

  </div>

  <button @click="handleClick">点我更改颜色</button>

</template>


<script setup>

import { ref } from 'vue'


const color = ref('#ddd')

const handleClick = () => {

  color.value = '#f00'

}

</script>


<style scoped>

.mode {
  // 可以直接引用，也可以使用字符串的方式
  color: v-bind(color)
  // color: v-bind('color')
}

</style>

如图初始颜色

点击的使用更换颜色

总结：相当于使用了css的自定义变量，vue 的 v-bind 方便了我们使用自定义变量的形式