如何在Vue.js中用JS变量拼接Vuetify主题CSS变量名

方法1：直接在模板中动态绑定style（最简洁） #

不用通过SCSS Module中转，直接把JS变量拼进CSS变量引用里：

<template>
  <div :style="{ backgroundColor: `var(--v-theme-${color})` }">Asd</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const color = ref("primary")
</script>

如果要保留SCSS Module的类，也可以结合使用：

<template>
  <div :class="$style['colored-text']" :style="{ backgroundColor: `var(--v-theme-${color})` }">Asd</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const color = ref("primary")
</script>

<style lang="scss" module>
.colored-text {
  padding: 1rem;
  border-radius: 4px;
  /* 其他样式写这里 */
}
</style>

方法2：通过自定义CSS变量中转（适配SCSS Module场景） #

如果必须在SCSS Module里写样式逻辑，可以先在模板中把Vuetify主题变量赋值给自定义CSS变量，再在SCSS里引用：

<template>
  <div :class="$style['colored-text']" :style="`--dynamic-bg: var(--v-theme-${color})`">Asd</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const color = ref("primary")
</script>

<style lang="scss" module>
.colored-text {
  background-color: var(--dynamic-bg);
  /* 其他样式 */
}
</style>

方法3：用计算属性生成完整的CSS变量引用（适合复杂场景） #

如果需要对color做额外逻辑处理，用计算属性提前生成完整的CSS变量字符串：

<template>
  <div :class="$style['colored-text']" :style="{ backgroundColor: bgColor }">Asd</div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
const color = ref("primary")
const bgColor = computed(() => `var(--v-theme-${color.value})`)
</script>

<style lang="scss" module>
.colored-text {
  /* 其他样式 */
}
</style>

补充说明：你原代码里的[[v-bind(color)]]语法无效，是因为Vue的<style module>中的v-bind只能绑定具体的变量值，无法直接拼接CSS变量的名称部分，所以需要通过上面这些中转方式实现动态拼接。

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