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>

效果

相关推荐
徐佳明19 分钟前
从"能聊天"到"能干活":MCP Server 如何让 AI 智能体真正落地
css
徐佳明23 分钟前
AI 智能体的"技能树":Skills 架构设计与工程落地实践
css
徐佳明26 分钟前
从单兵到军团:多 Agent 协同架构设计与工程落地
css
半夜里咳嗽的狼4 小时前
组件进侧栏就变形?用 CSS Container Queries 把响应式边界收回组件
前端·css
muddjsv5 小时前
CSS 值的完整计算过程:指定值、计算值、使用值、实际值与动态依赖
前端·css
用户059540174465 小时前
Playwright测试AI记忆存储踩坑实录:这个时序问题让我排查了6小时
前端·css
用户0595401744618 小时前
把AI长期记忆测试从手动验证换成pytest,2天揪出11个隐藏Bug
前端·css
a11177620 小时前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
gis开发之家21 小时前
《Vue3 从入门到大神40篇》Vue3 源码详解(十):diff 算法全解析 —— 为什么 Vue3 比 Vue2 更快?
javascript·算法·typescript·前端框架·vue3·vue3源码
布兰妮甜1 天前
CSS 现代布局终极方案:Grid 完整实战,替代浮动/弹性布局复杂场景
css·grid·实战教程·浮动·web布局