VUE3中CSS如何使用后台传过来的变量？

作者站长头像
站长
· 阅读数 17

最近在弄项目重构,里面所有的请求地址(包括网络请求地址,样式地址,背景图片地址,图片地址)都是拼接而成。具体的格式像:background-image:url($!imageWebServer/$!config.store_login_pic.path/$!config.store_login_pic.name);这样，这是在css中的引用。现在改用VUE3+ElementPlus来进行重构，现在后端提供 imageWebServer 和 config 参数，这些参数在所有css中是共用的，我该如何进行引用和拼接？

尝试代码如下，参数暂时写死VUE3中CSS如何使用后台传过来的变量？报错如下VUE3中CSS如何使用后台传过来的变量？

回复
1个回答
avatar
test
2024-06-27

简单的使用可以在 style 中使用用 v-bind 绑定你的JS变量👉 #CSS 中的 v-bind() - 单文件组件 CSS 功能 | Vue.js

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

会在编译时期给你替换成 CSS变量 的形式在CSS样式使用。例如这样 👇

<div id="app" data-v-app="">
    <p data-v-7ba5bd90="" style="--7ba5bd90-theme\.color: red;">hello</p>
</div>
<style css="">
p[data-v-7ba5bd90] {
  color: var(--7ba5bd90-theme\.color);
}
</style>

所以如果你动态变更了JS中的样式变量页面中的样式也会同步变更 👇

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})

// 模拟接口请求变更样式变量
setTimeout(() => {
  theme.value.color = 'green'
}, 5000)
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

Vue SFC Playground Demo

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容