技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
栉甜
11 小时前
APIs学习
前端·javascript·css·学习·html
dsyyyyy1101
11 小时前
CSS定位布局和网格布局
前端·css
Arman_
12 小时前
03 rusty-cat 进阶解析:架构设计、云存储接入、安全模型与长期维护评估
css·安全·rust·文件分片上传·文件分片下载
. . . . .
13 小时前
css module
前端·css
晓得迷路了
14 小时前
栗子前端技术周刊第 129 期 - TanStack npm 供应链入侵事件、pnpm 11.1、Tailwind CSS 4.3...
前端·javascript·css
漂流瓶jz
1 天前
总结CSS组件化演进之路:命名规范/CSS Modules/CSS in JS/原子化CSS
前端·javascript·css
rockey627
1 天前
AScript如何实现LINQ语法
sql·c#·.net·linq·script·eval·expression
Dxy1239310216
1 天前
CSS滤镜使用方法完全指南
前端·css
Dxy1239310216
1 天前
CSS中的filter属性详解
前端·css
何何____
1 天前
CSS 易混淆易错知识点
前端·css
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03Gemini大升级、AI眼镜首发、Android XR亮相,13天后见分晓04【AI】2026 年具身智能模型和世界模型总结05CC-Switch & Claude 基于 Linux 服务器安装使用指南06Codex 手机端连接教程:三分钟搞定,附完整步骤07人工智能最新动态 AI 日报 · 2026年5月10日08裂开!ChatGPT 居然开始要手机号验证,附详细解决方法09几个好用的ip纯净度检测网站10【踩坑记录 | 第一篇】微软商店无法使用时,如何手动安装 OpenAI Codex?附`.msix`文件系统错误解决方法