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>

效果

相关推荐
蜡台12 小时前
uniapp vue2 转 vue3
前端·javascript·uni-app·vue3·vue2
用户0595401744612 小时前
把前端内存泄漏排查从2小时压到5分钟,我们把它集成进了CI
前端·css
随风一样自由1 天前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
zhanghaofaowhrql2 天前
为CSDN博客编辑器安装自定义CSS主题,打造个性化写作界面
前端·css·编辑器
aichitang20243 天前
Claude fable 5与GPT5.5模型能力实测
javascript·css·人工智能·ai·html·html5
SL-staff3 天前
(十六)「JVS-Rules规则引擎 V2.5」— 结束节点
变量·规则引擎·业务系统·jvs·jvs规则引擎·结束节点·规则设计
就叫飞六吧3 天前
F12 控制台日志移植到页面案例
javascript·css·html
gis开发之家4 天前
vue3组合式函数(Composables)的艺术——将业务逻辑从UI组件中连根拔起
前端·javascript·vue.js·前端框架·vue3·前端工程化·前端架构
Bigger4 天前
对不起!我错怪你了,UnoCSS:一次和 AI 一起排查 DevTools 卡顿的经历
前端·css·人工智能
触底反弹4 天前
🎲 纯 CSS 搞定 3D 旋转立方体?还附赠一个「天坑」解决方案!
前端·css·html