vue 3.2+ 支持在 中用 v-bind() 直接绑定响应式变量，需 显式返回 ref/computed，配合 scoped 需 :deep() 穿透； 外则用 :style 绑定 --xxx 变量并配合 var() 使用。
直接在 <style></style> 中用 v-bind() 绑定响应式变量
Vue 3.2+ 支持在 <style></style> 块里直接调用 v-bind() 函数，把 script 中的响应式变量（ref 或 computed）映射为 CSS 属性值。它不是“引入”变量，而是让 CSS 原生读取 JS 数据。
关键点：
-
v-bind()必须写在<style></style>内，不能放在<template></template>的 class 或 style 里 - 绑定的变量必须在
<script setup></script>中显式返回（或在export default的setup()中 return），否则编译时找不到 - 支持常量、
ref、computed，但不支持普通对象属性（如data: { color: 'red' }中的color） - 单位需手动拼接，比如
font-size: v-bind(fontSize + 'px')；带单位的数值不能直接传数字，否则会被转成无单位字符串
示例：
<script setup>
import { ref } from 'vue'
const bg = ref('#2d8cf0')
const radius = ref(6)
</script><style scoped>
.box {
background-color: v-bind(bg);
border-radius: v-bind(radius + 'px');
}
</style>
:style 绑定内联 --xxx 变量，配合 var() 使用
这是兼容性最强、最可控的方式：用 :style 在元素上设置自定义属性（如 --bg-color），再在 CSS 中用 var(--bg-color) 读取。它不依赖构建工具版本，Vue 3.0 就能跑。
常见错误现象：
-
:style="{ 'bg-color': '#fff' }—— 缺少--前缀，浏览器完全忽略 -
:style="{ '--bg-color': null }—— 值为null或undefined时，会渲染成style="--bg-color: "，导致后续var(--bg-color, fallback)失效 - 子组件没生效 —— 很可能因为子组件根元素写了
all: initial，或未用var(--xxx)主动读取
正确写法示例：
<div :style="{ '--primary': primaryColor, '--opacity': opacity }">
<span class="text">Hello</span>
</div>
<style scoped>
.text {
color: var(--primary, #333);
opacity: var(--opacity, 1);
}
</style>
为什么 v-bind() 在 scoped 样式中有时不生效
根本原因不是语法错，而是 Vue 的 scoped 样式处理机制切断了变量传递链。当使用 <style scoped></style> 时，Vue 会给元素加属性选择器（如 data-v-f3f3eg9），而 v-bind() 编译后生成的 CSS 变量是注入到该元素的 style 属性里的，但后代选择器若没显式声明作用域穿透，就拿不到。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章