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>

效果

相关推荐
labixiong4 小时前
transition 写在 CSS 变量上为什么不生效?给变量补张「类型身份证」
前端·css·html
水月清辉8 小时前
CSS 常用语法详解
前端·css
言乐612 小时前
Python加速器2视频网页加速器
前端·javascript·css·python·音视频
RuoyiOffice12 小时前
SpringBoot3+Vue3 招聘 Offer:发出、审批通过、转入职怎么走完
spring boot·vue3·offer·入职·spring boot 3·hrm·招聘管理
今天AI了吗1 天前
2026年三大AI桌面智能体横评:Codex vs Hermes vs WorkBuddy
大数据·前端·css·人工智能·架构
HwJack201 天前
用 HML + CSS + JS 三段式写鸿蒙界面
javascript·css·harmonyos
豆约翰2 天前
css自制图书封面效果
前端·css
CoderYanger2 天前
前端基础——JavaScript(WebAPI)代码案例
java·开发语言·前端·javascript·css·前端框架·html5
EatFan3 天前
HTML前端利用flex解决input定位的问题
前端·css·html·css3
labixiong3 天前
告别scroll 监听:CSS 滚动驱动动画,主线程堵死也仍跟手
前端·css·html