技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
RuoyiOffice
36 分钟前
SpringBoot3+Vue3 最推荐的开源 OA 系统 2026:流程驱动、资源闭环、多端互通
spring boot·vue3·flowable·oa·协同办公·spring boot 3·开源oa
labixiong
1 小时前
CSS 锚点定位实测:零 JS 实现气泡跟随,自动翻转很香但暗藏 3 个致命坑
前端·css
芳心粽伙饭
1 小时前
CSS第一章 CSS引入
前端·css
Linsk
4 小时前
妙用:focus解决0到auto高度过渡的边界场景
前端·css
芳心粽伙饭
5 小时前
CSS第二章 选择器
前端·css
梦醒沉醉
21 小时前
4、CSS入门——属性选择器
css
এ慕ོ冬℘゜
1 天前
样式控制 .css ()
前端·css
鱼与宇
1 天前
Element-plus离线访问(适用内网)
elementui·vue3
来碗旺仔
1 天前
2026年了,CSS 终于能写 if 了
css
Moriarty123666
1 天前
【前端技巧】实现卡片页面容器全屏
前端·css
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)02GitHub 镜像站点03蜘蛛磁力 搜索引擎大全,如何使用蜘蛛磁力查找磁力链接04历年考研数学一、数学二、数学三真题试卷及答案PDF05ZCode 周末送额度活动开启:3 亿 Token 免费领取062026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?07微信历史版本含下载地址( Windows PC | 安卓 | MAC )及设置微信不更新08Agnes AI 免费 API 接入指南:文本、生图、生视频,一套接口全免费09AI 编程 IDE 全景解析 2026:Agent 全面接管开发链路10VSCode+CodeX扩展,无法启动