vue 3.4+ 中 v-bind() 绑定 css 变量必须写在 里，因为仅该标签支持将响应式变量自动注入 cssom；普通 或 下 v-bind() 会被编译器忽略，不生成 css 自定义属性。
Vue 3.4+ 中 v-bind() 绑定 CSS 变量为什么必须写在 <style module></style> 里？
因为只有 <style module></style> 的作用域 CSS 才支持 v-bind() 声明的响应式变量自动注入到当前组件的 CSSOM 中。普通 <style></style> 或 <style scoped></style> 下，v-bind(color) 会被忽略——编译器压根不解析它，也不会生成对应的 CSS 自定义属性。
常见错误现象：v-bind() 写对了，但浏览器开发者工具里完全看不到对应 CSS 变量，元素上也没生效。十有八九是没用 module 属性。
-
<style module></style>是硬性前提，缺它不可 - 变量名必须是合法的 CSS 标识符（不能含空格、破折号开头等），否则编译报错
Invalid CSS custom property name - 绑定的 JS 变量需是响应式（
ref/computed/reactive的属性），否则值变化不会触发 CSS 变量更新
v-bind() 在 <style module></style> 中的写法和限制
语法很简单：直接在 <style module></style> 里写 color: v-bind(color);，但背后有几条隐形规则：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章