:style="{ '--color': value }" 是最稳写法，因 --color 非法JS标识符，必须加引号；不加引号会语法报错，且未加 -- 前缀则无法作为CSS变量生效。
直接用 :style 绑定带引号的 --xxx 键名，是最稳、最通用的方式；<style></style> 中的 v-bind() 写法虽简洁，但只在 Vue ≥3.4 + Vite ≥4.3 等特定构建环境下才可用。
为什么 :style="{ --color: value } 会报错？
因为 --color 是非法 JS 标识符，不加引号会导致语法错误。Vue 不会帮你转义，它只是把对象字面量原样解析。
-
:style="{ '--color': value }✅ 正确：键名是字符串，符合 JS 语法 -
:style="{ --color: value }❌ 报错：JS 解析失败，编译直接中断 -
:style="{ color: value }❌ 无效：浏览器收到的是color: xxx，不是 CSS 变量
scoped 样式里 var(--color) 拿不到值？
CSS 自定义属性靠继承传递，<style scoped></style> 并不会阻止继承，但会限制选择器作用域——问题往往出在“谁设了变量”和“谁读了变量”不在同一继承链上。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 确保变量是在父元素（通常是组件根节点）上通过
:style注入的：<div :style="{ '--bg': bg }">...</div> - 子元素样式中用
background-color: var(--bg);能正常取到，前提是没被all: initial或all: unset截断继承 - 含
<slot></slot>或异步加载的子组件，其根元素可能脱离当前 DOM 层级，此时需显式在 slot 容器上再注入变量
:style 对象里混写逻辑表达式有多危险？
看似方便的三元判断，实际会让整个 :style 绑定变成脆弱的单点故障。
立即学习“前端免费学习笔记（深入）”；
-
:style="{ '--size': isLarge ? '24px' : '16px', '--color': theme?.primary || '#000' }"—— 若theme是 undefined，整个对象计算失败，所有样式丢失 - 推荐拆成计算属性：
computed: { styleVars() { return { '--size': this.isLarge ? '24px' : '16px', '--color': this.theme?.primary ?? '#000' } }}，再:style="styleVars" - 值为
null或undefined时，该变量会被移除（不是设为空字符串），这点可用于条件性关闭某项样式
真正容易被忽略的是 SSR 场景：服务端渲染时，:style 中的响应式变量能正常输出，但 <style></style> 里的 v-bind() 在纯服务端环境不执行，变量不会注入。如果项目需要 SSR 支持，别依赖后者。还有，浏览器开发者工具的“Computed”面板里查不到未被继承或已被移除的 --xxx，得去对应元素的 “Styles” 面板看 inline style 才算数。
