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>

效果

相关推荐
zhanghaofaowhrql10 小时前
为CSDN博客编辑器安装自定义CSS主题,打造个性化写作界面
前端·css·编辑器
aichitang202410 小时前
Claude fable 5与GPT5.5模型能力实测
javascript·css·人工智能·ai·html·html5
SL-staff11 小时前
(十六)「JVS-Rules规则引擎 V2.5」— 结束节点
变量·规则引擎·业务系统·jvs·jvs规则引擎·结束节点·规则设计
就叫飞六吧11 小时前
F12 控制台日志移植到页面案例
javascript·css·html
gis开发之家1 天前
vue3组合式函数(Composables)的艺术——将业务逻辑从UI组件中连根拔起
前端·javascript·vue.js·前端框架·vue3·前端工程化·前端架构
Bigger2 天前
对不起!我错怪你了,UnoCSS:一次和 AI 一起排查 DevTools 卡顿的经历
前端·css·人工智能
触底反弹2 天前
🎲 纯 CSS 搞定 3D 旋转立方体?还附赠一个「天坑」解决方案!
前端·css·html
finyouIT2 天前
锚点实现了点击导航平滑滚动到页面指定位置的三种方法
javascript·css
用户059540174462 天前
用了半年 LangChain Memory,才发现记忆总“串台”——3 个自动化测试避坑指南
前端·css
More more3 天前
纯手搓css样式:科技感弹窗边框
css·科技·css3