Vue.js 定义js和css中使用的变量

例如，我想定义一种全局颜色

a='#FFF'

，并在js和css中引用它，以确保项目中只有一种名为

a

的颜色。然后当

a

的值改变时，js和css中的

a

也会改变。这在vue中可能吗？

嗯。。。我在考虑将watchers

watch

与CSS变量结合使用

也许是这样的？ 每当

a

改变时，CSS变量

--a

也会改变

实际上，你可以输入任何你想要的颜色格式。十六进制，rgb，rgba

let v=新的Vue({
el:“应用程序”，
数据：{
a：“红色”
},
观察：{
a（瓦尔）{
document.documentElement.style.setProperty（“--a”，val）；
}
}
})

：根目录{
--a:红色；
}
#应用程序{
高度：100px；
宽度：100%；
背景：var（--a）；
过渡：背景500ms；
}
p{
背景：白色；
}

颜色：{{a}