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>

效果

相关推荐
永远的WEB小白4 小时前
css改变svg图标的颜色
前端·javascript·css
Xzh04236 小时前
Web 前端开发 — 期末复习指南(Html、Css、Js)
css·html5·web·js·期末
就叫_这个吧8 小时前
HTML或JSP页面链接CSS,link标签没问题,但不显示样式问题解决
java·前端·css·html·intellij-idea·jsp
古怪今人8 小时前
Vite8的项目中集成CSS预处理器编译器SCSS 集成Mock工具
前端·css·scss
SL-staff8 小时前
Vue3私有化AI白板落地实战|解决政企项目智能绘图合规难题(可直接复用源码)
人工智能·低代码·开源·vue3·白板·jvs规则引擎·jvs-draw
小此方8 小时前
【别传:Web前端开发(二)】重塑视觉视界:CSS核心机理与弹性排版全景草稿
前端·css
粉末的沉淀8 小时前
css:隐藏video标签的下载按钮
前端·css
雨季mo浅忆9 小时前
Cursor快速实现上传Excel功能
前端·vue3·ai编程
kyriewen20 小时前
CSS Container Queries:彻底告别 @media 写到手软,附 5 个真实布局案例
前端·css·面试
川冰ICE1 天前
JavaScript实战④|天气查询应用,调用API与异步处理
javascript·css·css3