技术栈

vue3中css使用script中定义的变量

梁云亮2023-09-12 13:18

代码

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>

效果

上一篇:YOLO目标检测——密集人群人头数据集+已标注yolo格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
小月土星
10 小时前
CSS 3D 从入门到炫技:手把手教你写一个旋转立方体
前端·css
xingpanvip
10 小时前
星盘接口开发文档:本命盘接口指南
android·开发语言·css·php·lua
HjhIron
11 小时前
CSS 3D 世界:从盒子模型到三维空间动画
javascript·css
参宿7
12 小时前
CSS 悬挂空白与选区溢出
前端·css
黄敬峰
14 小时前
纯 CSS3 打造 3D 旋转魔方:从文档流、Flex 布局到空间变换的硬核复盘
css
JieE212
14 小时前
手把手带你用纯 CSS 实现一个 3D 旋转魔方,这些前端基础你能打几分?
前端·css·html
JYeontu
14 小时前
开箱流水加载动画
前端·javascript·css
想要成为糕糕手
15 小时前
从零到一:CSS 3D 旋转立方体完全指南
前端·css·canvas
YHL
16 小时前
🧊 CSS 3D 硬核解析:四个属性手写旋转立方体
前端·css·html
Odoo老杨
16 小时前
如何直接在线定制修改 Odoo UI界面?
css·python·crm·odoo·erp·中小企业数字化
热门推荐
012026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?022026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?032026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06HTTP 与 HTTPS 的区别:从原理到实战详解072026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?08上线仅72小时被强制下架:Claude Fable 5 的短命09Codex 下载安装指南:Windows 和 macOS 官方版下载10AI科技热点日报 | 2026年6月1日