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>

效果

相关推荐
苏打水com18 分钟前
第十一篇:Day31-33 前端安全与性能监控——从“能用”到“安全可靠”(对标职场“系统稳定性”需求)
前端·javascript·css·vue.js·html
syt_10131 小时前
grid布局之-子项放置1
前端·javascript·css
syt_10131 小时前
grid布局之-子项放置2
前端·javascript·css
Youyzq12 小时前
前端项目发布到cdn上css被编译失效问题rgba失效和rgb失效
前端·css·算法·cdn
凯小默12 小时前
30-更新用户信息并且刷新表格
vue3
茄汁面20 小时前
实现紧贴边框的高亮流光动画效果(长方形适配)
前端·javascript·css
小明记账簿21 小时前
解锁前端新技能:让JavaScript与CSS变量共舞
前端·javascript·css
凯小默21 小时前
27-编辑用户信息弹框组件化(显示隐藏功能)
vue3
棒棒的唐21 小时前
avue uploader图片预览拉伸变型的css处理方法
前端·css
im_AMBER1 天前
Canvas架构手记 08 CSS Transform | CSS 显示模型 | React.memo
前端·css·笔记·学习·架构