vue 3 动态绑定 css 变量有两条正路：一是用 :style 绑定内联自定义属性，二是用 中的 v-bind() 直接引用响应式变量；前者兼容性好、逻辑直白，后者更简洁但对 vue 版本（≥3.4）、构建工具（如 vite ≥4.3）和 setup 语法有硬性要求。
Vue 3 中动态绑定 CSS 变量有两条正路：一是用 :style 绑定内联自定义属性，二是用 <style></style> 里的 v-bind() 直接引用响应式变量。前者兼容性好、逻辑直白；后者更简洁但对构建环境和 Vue 版本有硬性要求。
用 :style 绑定 --xxx 变量（最稳）
这是目前最可靠、无需额外配置的写法，适用于所有 Vue 3.x（≥ 3.0），且不依赖构建工具支持。
-
--前缀不能省：键名必须是字符串"--color"，写成color或colorName都无效 - 值自动转字符串，但建议手动加单位：比如
height + "px"，避免0被转成空字符串 - 只设值，不自动应用：你得在 CSS 里显式用
var(--color)才能生效，否则只是“挂在那里” - 作用域默认继承：父元素设了
--bg，子元素样式里写background: var(--bg)就能读到，除非被all: initial或 shadow DOM 截断
示例：<div :style="{ '--text-color': textColor, '--gap': gap + 'rem' }"></div>
v-bind() 在 <style></style> 中直接用（需条件）
这种写法看着干净，但实际落地容易踩坑——它不是运行时求值，而是编译时注入 CSS 变量，依赖 Vue 编译器和构建工具链配合。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 必须用
<script setup></script>，且变量要是ref或computed，普通let不行 - Vue 版本 ≥ 3.4，Vite ≥ 4.3（低于此版本可能静默失效）
-
<style scoped></style>下可用，但变量会被加上哈希后缀（如--color-f3f2eb18），不影响使用 - SSR 场景下，服务端首次渲染时若变量未初始化，
v-bind()会输出空值或默认值
示例：.box { color: v-bind(textColor); }
为什么变量设了却没生效？常见断点
不是代码写错，而是链路断在某个环节。按顺序查：
- 打开 Elements 面板，看目标元素的
style属性里有没有出现--xxx: value—— 没有，说明:style绑定失败或变量非响应式 - Computed 面板里搜
--xxx，看是否显示为initial或空 —— 是，说明 CSS 里没用var(--xxx)读取，或作用域不对 - 子组件样式里用了
var(--xxx)却不生效：先检查它根元素是否被all: initial重置，再确认父组件确实把变量设在可继承的节点上 - 用了
v-bind()但编译后 CSS 里还是原样文字：大概率是 Vite 插件没识别到，升级@vitejs/plugin-vue到最新版
别忽略的作用域细节
CSS 变量不是“设了就全局可用”。哪怕你在组件根元素上用 :style 设了 --primary，如果子组件是独立 .vue 文件，它的样式规则仍需主动调用 var(--primary)，且该规则匹配的元素必须处于变量声明的作用域内（通常是祖先元素）。scoped 样式本身不影响变量继承，但如果你用 :deep() 穿透子组件样式，记得变量也得穿透过去——更稳妥的做法，是把变量统一挂在 或组件容器上，再由各层样式按需读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
