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>

效果

相关推荐
用户059540174469 分钟前
把 AI 记忆验证从手工 Log 换成 Pytest+Mem0,上下文丢失 bug 减少 90%
前端·css
小林ixn27 分钟前
BEM 命名规范与 CSS 重置:打造优雅的按钮页面实战
前端·css
用户0595401744639 分钟前
把对话记忆从内存搬到 Redis,长期记忆准确率从 63% 提升到 98%
前端·css
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_43:CSS布局挑战——从浮动到弹性盒与栅格的综合实践
前端·css·ui·html·tensorflow
小茴香35318 小时前
Vue3路由权限动态管理
前端·前端框架·vue3
ZC跨境爬虫20 小时前
跟着 MDN 学CSS day_37:(从文档流到粘性定位的底层原理)
前端·javascript·css·ui·html
ZC跨境爬虫21 小时前
跟着 MDN 学CSS day_40:(Flexbox实战技能测试)
前端·css·ui·html·tensorflow
ZC跨境爬虫21 小时前
跟着 MDN 学CSS day_36:(float、clear与BFC深度解析)
前端·javascript·css·ui·交互
用户059540174461 天前
把 AI Agent 记忆验证从手工比对换成 Pytest + 向量数据库,测试效率提升 10 倍
前端·css
Xp021911031 天前
知网研学、万方、WPS、大以论文四大排版工具横评,新用户免费排版等你领!
前端·css·html·生活·wps·论文排版