v-bind()是Vue 3中唯一编译时将响应式变量注入CSS的机制，仅在<style scoped>或<style module>中有效，需顶层声明响应式变量并正确引用路径。
Vue 3 中，v-bind() 是唯一能让响应式状态“直接透传”进样式层的原生机制，不是靠 JS 拼字符串，也不是靠内联 :style，而是编译时就把变量注入 CSS 规则，生成带哈希前缀的自定义属性（如 --_abc123-primaryColor），再用 var() 自动读取。关键不在怎么写，而在变量是否“可被编译器看见”。
必须用 <style scoped> 或 <style module>
v-bind() 在普通 <style>（无属性）中完全无效，会被编译器静默忽略。只有两种合法容器：
-
<style scoped>：最常用，支持顶层 ref / computed / reactive 变量，写法如color: v-bind(primaryColor); -
<style module>：语义更严格，变量必须在<script setup>顶层声明，且名称需为合法 CSS 标识符（不能含-、数字开头、空格）
变量必须是响应式且顶层暴露
编译器只收集 <script setup> 顶层声明的响应式数据，以下写法都会失效：
- 写在函数内部：
function init() { const x = ref('red') }→ 不可见 - 普通常量：
const color = 'blue'→ 非响应式，不触发更新 - 未解构的对象属性：
color: v-bind(theme.text)→ 必须先提取：const text = computed(() => theme.value.text) - 路径带点但没加引号：
color: v-bind(theme.primary)→ 正确写法是color: v-bind("theme.primary")
支持表达式，但要加引号包裹
v-bind() 引号内是 JS 表达式，不是模板语法，可直接拼单位或做条件判断：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
font-size: v-bind("fontSize + 'px'");opacity: v-bind("isActive ? 1 : 0.3");background: hsl(v-bind("hue"), 70%, 60%);
注意：引号外仍是 CSS，所以 hsl() 这类函数要写在 v-bind() 外部，不能塞进引号里。
和 :style 绑定的区别别搞混
:style="{ '--color': color }" 和 v-bind(color) 解决的是不同问题：
-
:style是运行时内联样式，适合给子元素传递变量（通过var(--color)读取），也适合做 transform/top 等数值微调 -
v-bind()是编译时注入，生成带作用域哈希的 CSS 变量，只对当前组件的<style scoped>生效，不能被子组件继承 - 想全局共享？得手动写入
document.documentElement.style.setProperty('--theme-color', value)，并注意在onUnmounted清理
