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>

效果

相关推荐
鹿九巫5 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
HuaHua的世界8 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
鹿九巫8 小时前
【CSS】层叠,优先级与继承(三):超详细继承知识点
前端·css
AXUI8 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html
末日的狂欢姐9 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html·reset·normalize
LAOLONG-C11 小时前
今日CSS学习浮动->定位
前端·css·css3
小桥风满袖12 小时前
Three.js-硬要自学系列15 (圆弧顶点、几何体方法、曲线简介、圆、椭圆、样条曲线、贝塞尔曲线)
前端·css·three.js
凌冰_12 小时前
CSS3 基础(背景-文本效果)
前端·css·css3
HtwHUAT13 小时前
五、web自动化测试01
前端·css·chrome·python·功能测试·selenium·html
2401_8370885014 小时前
CSS清楚默认样式
前端·javascript·css