vue3中css使用script中定义的变量

代码

javascript 复制代码
<template>
  <div class="box">haha</div>
</template>

<script setup lang="ts">
const boxWidth = '500px'
</script>

<style lang="scss">
.box {
  width: v-bind(boxWidth);
  height: 200px;
  background-color: red;
}
</style>

效果

相关推荐
在逃花果山的小松2 小时前
CSS 调试头大报错难查?ChatGPT 一键定位样式问题并给出修复方案
css
编程技术手记6 小时前
Vue Scoped CSS 与动态创建 DOM 的兼容性问题
前端·css·vue.js
用户059540174468 小时前
LangChain 记忆模块踩坑实录:靠自动化测试,我把上下文丢失率从 30% 降到 0
前端·css
雨翼轻尘9 小时前
03_HTML进阶标签与CSS入门
前端·css·html·入门·进阶标签
永远的WEB小白1 天前
css改变svg图标的颜色
前端·javascript·css
Xzh04231 天前
Web 前端开发 — 期末复习指南(Html、Css、Js)
css·html5·web·js·期末
就叫_这个吧1 天前
HTML或JSP页面链接CSS,link标签没问题,但不显示样式问题解决
java·前端·css·html·intellij-idea·jsp
古怪今人1 天前
Vite8的项目中集成CSS预处理器编译器SCSS 集成Mock工具
前端·css·scss
SL-staff1 天前
Vue3私有化AI白板落地实战|解决政企项目智能绘图合规难题(可直接复用源码)
人工智能·低代码·开源·vue3·白板·jvs规则引擎·jvs-draw
小此方1 天前
【别传:Web前端开发(二)】重塑视觉视界:CSS核心机理与弹性排版全景草稿
前端·css