Vue中使用v-bind绑定CSS变量无效，该如何解决？

你的代码存在两处关键错误，导致样式无法被视图识别：

1. 变量未在组件脚本区域正确定义 #

你直接写的color = 'red'没有放在Vue组件的<script>标签内，Vue无法识别这个游离的变量，必须将其定义在组件的响应式数据区域中。

2. CSS中v-bind的语法错误 #

在Vue 3的单文件组件<style>标签里，使用v-bind绑定变量需要用单引号包裹变量名，否则无法正确解析。

正确代码示例（选项式API） #

<template>
  <div class="div">div</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style scoped>
.div {
  background: v-bind('color');
}
</style>

正确代码示例（组合式API） #

<template>
  <div class="div">div</div>
</template>

<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>

<style scoped>
.div {
  background: v-bind('color');
}
</style>

替代方案：行内样式直接绑定 #

如果不想在<style>中处理，也可以直接用行内样式绑定：

<template>
  <div :style="{ background: color }">div</div>
</template>

<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>

内容的提问来源于stack exchange，提问作者forzeeh