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>

效果

相关推荐
Bigger1 天前
Coco AI 技术演进:Shadcn UI + Tailwind CSS v4.0 深度迁移指南 (踩坑实录)
前端·css·weui
八哥程序员1 天前
从DOM结构到布局流:display: content的深度解析与实战应用
前端·css
前端达人1 天前
CSS终于不再是痛点:2026年这7个特性让你删掉一半JavaScript
开发语言·前端·javascript·css·ecmascript
dreams_dream2 天前
vue2动态更改css属性方法大全
前端·css
洞窝技术2 天前
从原理到落地:大屏适配适配 + 高并发弹幕的企业级技术手册
前端·css
顾安r2 天前
12.17 脚本工具 自动化全局跳转
linux·前端·css·golang·html
苏打水com2 天前
第十七篇:Day49-51 前端工程化进阶——从“手动”到“自动化”(对标职场“提效降本”需求)
前端·javascript·css·vue.js·html
UWA2 天前
哪些因素和参数会影响Bloom的性能开销
性能优化·script·rendering
码途潇潇2 天前
数据大屏常用布局-等比缩放布局(Scale Laylout)-使用 CSS Transform Scale 实现等比缩放
前端·css
苏打水com2 天前
第二十篇:Day58-60 前端性能优化进阶——从“能用”到“好用”(对标职场“体验优化”需求)
前端·css·vue·html·js