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>

效果

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