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>

效果

相关推荐
闪闪发光得欧16 小时前
前端提效新思路:Gemini 3.5 自动化定位 CSS 异常
前端·css
用户059540174464 天前
AI Agent记忆测试踩坑实录:Mock骗了我一周,Mem0+pytest一招破局
前端·css
Darling噜啦啦5 天前
CSS 3D 变换与 Flex 布局实战:从零打造旋转立方体
前端·css
用户059540174465 天前
把待办应用从Electron换成Tauri,内存占用狂降90%,打包体积仅5MB
前端·css
小月土星6 天前
CSS 3D 从入门到炫技:手把手教你写一个旋转立方体
前端·css
xingpanvip6 天前
星盘接口开发文档:本命盘接口指南
android·开发语言·css·php·lua
HjhIron6 天前
CSS 3D 世界:从盒子模型到三维空间动画
javascript·css
参宿76 天前
CSS 悬挂空白与选区溢出
前端·css
黄敬峰6 天前
纯 CSS3 打造 3D 旋转魔方:从文档流、Flex 布局到空间变换的硬核复盘
css
JieE2126 天前
手把手带你用纯 CSS 实现一个 3D 旋转魔方,这些前端基础你能打几分?
前端·css·html