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>

效果

相关推荐
ZhengEnCi39 分钟前
Q06-导航按钮高级拟态玻璃效果构建完全指南
前端·css
用户059540174466 小时前
Redis持久化踩坑实录:这个数据丢失Bug让我排查了6小时
前端·css
用户059540174461 天前
Redis记忆存储故障恢复测试踩坑实录:手动测试让我漏掉了2个一致性Bug
前端·css
用户059540174461 天前
用了3年Mock,才发现Redis记忆存储的测试一直漏掉了60%的边界场景
前端·css
用户059540174462 天前
用了6个月LangChain,才发现AI Agent的记忆存储一直有坑——写了23个Pytest用例才彻底修好
前端·css
用户059540174462 天前
把LLM记忆测试从手工脚本换成Pytest参数化,回归时间从2小时降到10分钟
前端·css
用户059540174463 天前
Redis缓存一致性踩坑实录:线上故障排查6小时,我用pytest+内存快照把它永久关进了笼子
前端·css
llllk4 天前
新手向逐段讲解
css
玄玄子5 天前
CSS 浮动引起父元素高度塌陷
前端·css
用户0926292831456 天前
CSS 代码调试总踩坑?Gemini 3.5 精准定位修复
css