Vue2/Vue3中快捷使用data中的变量反映到css变量（scss也适用）

最新推荐文章于 2025-05-30 11:14:12 发布

星野睡不醒

最新推荐文章于 2025-05-30 11:14:12 发布

阅读量1.5w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： css 文章标签： vue js css vue3 css3

本文链接：https://blog.csdn.net/qq_21567385/article/details/109590304

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍Vue2和Vue3中如何利用CSS变量实现主题切换和样式管理。通过计算属性和新的<style>标签特性，使样式随数据变化而实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

很多情况我们需要主题搭配，亦或是统一便捷的管理，css 变量是必不可少的。

在 Vue 中将 data 中的变量反映到 css 变量上也是大势所趋。

Vue2 用法

在以前的 Vue2 中，我们通常使用计算属性反映 data 中的变量到 css 中：

<template>
  <div :style="cssVars">
    <p class="text">测试文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "red"
    };
  },
  computed: {
    cssVars() {
      return {
        "--color": this.color
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.text {
  color: var(--color);
}
</style>

从而在 data 中的数据改变时，计算属性也会被同步改变并反映到挂载的节点 style 中。

Vue3 用法

在 Vue3 中，提供了一种新的快捷使用方法：

<template>
  <div>
    <p class="text">测试文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "red"
    };
  }
};
</script>

<style scoped vars="{ color }">
.text {
  color: var(--color);
}
</style>

这里通过 <style> 标签上的 vars 进行解构 data ，从而在样式区域就可以使用 css 变量了！

更多使用方法详见官方文档：

说明文档：sfc-style-variables

兼容 scss

官方文档中介绍以 var(--global:xxx) 在这种方法可以使用全局的 css 变量（若使用 scoped 会自动给 css 变量附带 hash 值），但只介绍了 css 的写法：

<style scoped vars="{ color }">
h1 {
  font-size: var(--global:fontSize);
}
</style>

这么写在 scss 是会编译报错的。摸索一番，如果要使用 scss ，请使用如下写法：

<style lang="scss" scoped vars="{ color }">
.home {
  color: var(#{"--global:color"});
}
</style>

scss 动态取值 #{} 会将双引号自动去掉，从而得到 var(--global:color) ，解决了编译失败的问题。

总结

无论在 Vue2 还是 3 中，css 变量都是即时反映的，无需担心不会更新的问题。

虽然 Vue3 中的 css 变量比较简单，但目前处于 实验性 ：

如果追求稳定，无论在 Vue3 还是 2 中，建议都使用计算属性的写法。