Vue 3.2+ 支持在 <style> 中用 v-bind() 直接绑定响应式变量，需 <script setup> 显式返回 ref/computed，配合 scoped 需 :deep() 穿透；<style> 外则用 :style 绑定 --xxx 变量并配合 var() 使用。
直接在 <style> 中用 v-bind() 绑定响应式变量
Vue 3.2+ 支持在 <style> 块里直接调用 v-bind() 函数，把 script 中的响应式变量（ref 或 computed）映射为 CSS 属性值。它不是“引入”变量，而是让 CSS 原生读取 JS 数据。
关键点：
-
v-bind()必须写在<style>内，不能放在<template>的 class 或 style 里 - 绑定的变量必须在
<script setup>中显式返回（或在export default的setup()中 return），否则编译时找不到 - 支持常量、
ref、computed，但不支持普通对象属性（如data: { color: 'red' }中的color） - 单位需手动拼接，比如
font-size: v-bind(fontSize + 'px')；带单位的数值不能直接传数字，否则会被转成无单位字符串
示例：
<script setup>
import { ref } from 'vue'
const bg = ref('#2d8cf0')
const radius = ref(6)
</script>
<style scoped>
.box {
background-color: v-bind(bg);
border-radius: v-bind(radius + 'px');
}
</style>
:style 绑定内联 --xxx 变量，配合 var() 使用
这是兼容性最强、最可控的方式：用 :style 在元素上设置自定义属性（如 --bg-color），再在 CSS 中用 var(--bg-color) 读取。它不依赖构建工具版本，Vue 3.0 就能跑。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
-
:style="{ 'bg-color': '#fff' }—— 缺少--前缀，浏览器完全忽略 -
:style="{ '--bg-color': null }—— 值为null或undefined时，会渲染成style="--bg-color: "，导致后续var(--bg-color, fallback)失效 - 子组件没生效 —— 很可能因为子组件根元素写了
all: initial，或未用var(--xxx)主动读取
正确写法示例：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
<div :style="{ '--primary': primaryColor, '--opacity': opacity }">
<span class="text">Hello</span>
</div>
<style scoped>
.text {
color: var(--primary, #333);
opacity: var(--opacity, 1);
}
</style>
为什么 v-bind() 在 scoped 样式中有时不生效
根本原因不是语法错，而是 Vue 的 scoped 样式处理机制切断了变量传递链。当使用 <style scoped> 时，Vue 会给元素加属性选择器（如 data-v-f3f3eg9），而 v-bind() 编译后生成的 CSS 变量是注入到该元素的 style 属性里的，但后代选择器若没显式声明作用域穿透，就拿不到。
解决办法只有两个：
- 去掉
scoped，改用<style module>或全局样式（适合主题类变量） - 保留
scoped，但对需要读取变量的后代规则加:deep()，例如：:deep(.child) { color: var(--primary); }
注意：:deep() 对第三方组件（如 Element Plus 的 <el-button>）不一定有效——它们内部可能用了 Shadow DOM 或样式隔离，此时只能退回到 :style + var() 的组合，并确保变量设在父容器或 :root 上。
构建环境和版本踩坑清单
v-bind() 在 <style> 中可用，不是纯语法糖，它依赖 Vue 编译器和构建工具协同工作。
必须满足以下全部条件：
- Vue 版本 ≥ 3.2（3.0–3.1 需手动开启
compilerOptions.experimentalInlineSSR，不建议） - Vite ≥ 4.3（旧版 Vite 会静默忽略
v-bind()，不报错也不生效） - 使用
<script setup>语法（Options API 的setup()函数中返回变量也可，但data()不行） - 非 SSR 场景下，
v-bind()值不能是异步获取的（比如await fetch()结果），否则首次渲染为空
如果你用的是 Vue CLI，要确认已升级到 @vue/cli-service ≥ 5.0.8，否则 v-bind() 无法被识别为合法 CSS 函数。
真正容易被忽略的点是：v-bind() 生成的 CSS 并不等价于手动写的 --xxx 变量，它本质是编译期替换 + 运行时注入的混合行为。一旦你 mix 了 :style 设置的变量和 v-bind() 绑定的变量，优先级和作用域可能互相干扰，调试时得盯紧 Elements 面板里的最终 style 属性和 computed style 两栏。
