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>

效果

相关推荐
用户059540174467 小时前
LangChain Memory 踩坑实录:10种异常场景差点搞崩生产,我们写了一套自动化测试保命
前端·css
用户0595401744620 小时前
Redis缓存回滚踩坑实录:一个配置失误,让我在凌晨3点丢了3000条数据
前端·css
এ慕ོ冬℘゜1 天前
纯 CSS 实现自定义 Switch 开关(商品上下架滑块)
前端·css
并不喜欢吃鱼1 天前
二.前端web开发:零基础吃透 CSS 核心知识
前端·css
思码梁田1 天前
CSS display 属性:从元素类型转换到隐藏元素的实用指南
前端·css·display·inline·block·none·inline-block
weipt1 天前
springboot项目运行的几种方式
javascript·css·html
java1234_小锋2 天前
Vue3专题 - 响应式基础
vue·vue3·响应式
用户059540174462 天前
把AI对话记忆存储测试从手工改成Playwright+pytest,覆盖率从20%提到96%,回归时间缩短90%
前端·css
醉城夜风~2 天前
CSS盒模型(Box Model)
前端·css
呼噜想睡觉2 天前
Flex弹性布局
css·html·css3