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>

效果

相关推荐
幻影星空VR元宇宙5 小时前
多元互动与科技融合的5D体验馆新风尚
css·百慕大冒险·幻影星空
曲幽6 小时前
手把手搞定FastAPI静态文件:安全、上传与访问
css·python·fastapi·web·js·favicon·staticfiles
冥界摄政王11 小时前
Cesium学习第二章 camera 相机
node.js·html·vue3·js·cesium
韩曙亮11 小时前
【Web APIs】移动端轮播图案例 ( 轮播图自动播放 | 设置无缝衔接滑动 | 手指滑动轮播图 | 完整代码示例 )
前端·javascript·css·html·轮播图·移动端·web apis
PieroPc12 小时前
Html +css+js 写的一个小商城系统(POS系统)
javascript·css·html
OranTech12 小时前
练习06-CSS设置样式
css
幻影星空VR元宇宙21 小时前
飞行影院设备价格解析及性价比分析
css·百慕大冒险·幻影星空
霍理迪1 天前
CSS布局方式——定位
前端·css
灯把黑夜烧了一个洞1 天前
2026年跨年倒计时网页版
javascript·css·html·2026跨年代码·新年代码
Irene19911 天前
在 Vue3 中使用 Element Plus
vue3·element plus