VUE3中CSS如何使用后台传过来的变量？-灵析社区
元气满满才怪啊最近在弄项目重构,里面所有的请求地址(包括网络请求地址,样式地址,背景图片地址,图片地址)都是拼接而成。具体的格式像:background-image:url($!imageWebServer/$!config.store_login_pic.path/$!config.store_login_pic.name);这样，这是在css中的引用。现在改用VUE3+ElementPlus来进行重构，现在后端提供 imageWebServer 和 config 参数，这些参数在所有css中是共用的，我该如何进行引用和拼接？ 尝试代码如下，参数暂时写死  报错如下 
喝一杯吧可以吗简单的使用可以在 "style" 中使用用 "v-bind" 绑定你的JS变量
👉 "#CSS 中的 v-bind() - 单文件组件 CSS 功能 | Vue.js" (https://link.segmentfault.com/?enc=p4nDpu6vXGIVt%2BRE1n0d0g%3D%3D.qYSjS9UE8%2BYQss5d7a%2FEAwB1BTW4baZxwV%2BWtm6urAx93iuu8gfnqkVVw%2BAYTGb9B79LHzWOfpOIjjcmnZzkaA%3D%3D)
import { ref } from 'vue'
const theme = ref({
color: 'red',
})
hello
p {
color: v-bind('theme.color');
}
会在编译时期给你替换成 CSS变量 的形式在CSS样式使用。
例如这样 👇
hello
p[data-v-7ba5bd90] {
color: var(--7ba5bd90-theme\.color);
}
所以如果你动态变更了JS中的样式变量页面中的样式也会同步变更 👇
import { ref } from 'vue'
const theme = ref({
color: 'red',
})
// 模拟接口请求变更样式变量
setTimeout(() => {
theme.value.color = 'green'
}, 5000)
hello
p {
color: v-bind('theme.color');
}
"Vue SFC Playground
Demo" (https://link.segmentfault.com/?enc=8yNrP%2B1vU7jThWio1SAkZQ%3D%3D.5gPSnfCH1i8w0uNbi5NJ9CGnb%2FoxGiGWGZSvHFPS6aU7tjn8CJN1TAXPDwEX7FNRpiDzzpbO1cHeoqMNkIOLw78iB0OW1lS5RZMKSaZSLk%2F5l1oP9%2Fm7AVs8dLWFjRtdhnsMUy4WwTr%2B9gvFutTrIES86dk0lv59gX%2F9JDbDsP8KVuxXUzQM58JcYCsoU7bAm89jlZYaQQNMeEGhNsPLsDcDZpiH94Wb6yJM23PsGqytv4xa9lF1IBysgU%2FNVBvJC2XFGZynrnh6pkqA11sUaXVmDOWdwXyTOMEbSJTU5AadSrqCQ0kB3duRR%2BLHcx6OC8y7DqImNtAPqCwSZkfaRiG8%2Fa61iHRH6Bw1qBYlSs8cSr1Ql94WvJ0K4rXPZQB6%2FoR0nvzsuxnbb7WWeMYb7wf1wKggHdPdUv7mJGTmX67djtcFvU1YMfZVgZmWSnHNIv3OP2zfOqErq4YyIPh36fZ0V7C%2F4nGTatYwqTpDnIpr5XQjpE3ZSiba%2B2%2Bb9Wd5e%2B%2Ffgi3sO5bWlHiTxD2hkJgDMuUT5Ikv2kaQK1TBuEXqmnj7T0hsDb4lCM3Yi96wUJWkTK7zfQG5qdgcvOR8GF0y9aga%2BYpVwBfiKHa5MhTr8RdjmuQHBvQsbQunFeWfeCFdeY2GP1gP%2Fo4z4NKX4Ojk8%2FY1EMe9qsl7JgrASZ0SpxxF6hR6YlPTRHeTfKpOeCUyWY%2FRgyQNJGUZ8IZo0Ixqdyuv%2F21IvHwZ9thTrMEAtFh9X7988BWEO1h8wY1ieB4nucJ%2Fx6fYgImaqoxBlw%3D%3D)