v-bind()是vue 3中唯一编译时将响应式变量注入css的机制，仅在或中有效，需顶层声明响应式变量并正确引用路径。
Vue 3 中，v-bind() 是唯一能让响应式状态“直接透传”进样式层的原生机制，不是靠 JS 拼字符串，也不是靠内联 :style，而是编译时就把变量注入 CSS 规则，生成带哈希前缀的自定义属性（如 --_abc123-primaryColor），再用 var() 自动读取。关键不在怎么写，而在变量是否“可被编译器看见”。
必须用 <style scoped></style> 或 <style module></style>
v-bind() 在普通 <style></style>（无属性）中完全无效，会被编译器静默忽略。只有两种合法容器：
-
<style scoped></style>：最常用，支持顶层 ref / computed / reactive 变量，写法如color: v-bind(primaryColor); -
<style module></style>：语义更严格，变量必须在<script setup></script>顶层声明，且名称需为合法 CSS 标识符（不能含-、数字开头、空格）
变量必须是响应式且顶层暴露
编译器只收集 <script setup></script> 顶层声明的响应式数据，以下写法都会失效：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 写在函数内部：
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 表达式，不是模板语法，可直接拼单位或做条件判断：
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></style>生效，不能被子组件继承 - 想全局共享？得手动写入
document.documentElement.style.setProperty('--theme-color', value)，并注意在onUnmounted清理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
