技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
‘’林花谢了春红‘’
6 小时前
小玩意 生日快乐
css·html·css3
梨想橙汁
10 小时前
CSS零基础入门:语法、引入方式与基础样式全解析
css
七牛开发者
11 小时前
RAG 工程里的上下文剪枝:如何减少 68% 的上下文
前端·css·github
叉歪
13 小时前
为 UnoCSS 扩展无限色阶与主题换色
前端·css
TheITSea
17 小时前
4、React+Tailwind CSS
前端·css·react.js
iCOD3R
1 天前
Skill - kill-ai-slop 解决“AI 味”样式
前端·css·ai编程
gis开发之家
2 天前
《Vue3 从入门到大神29篇》单元测试与 E2E 测试 —— 保障 Vue3 项目的质量
前端·javascript·vue.js·单元测试·前端框架·vue3
努力成为AK大王
2 天前
CSS 入门完整笔记
前端·css
雨季mo浅忆
2 天前
上传文件夹
前端·vue3
神明不懂浪漫
2 天前
【第四章】CSS(二)——文本外观属性与复合选择器
前端·css·经验分享·笔记
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震:GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03AI科技热点日报 | 2026年07月01日04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna:官方性能数据与选型分析06AI 编程 IDE 全景解析 2026:Agent 全面接管开发链路072026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?08国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)09几个好用的ip纯净度检测网站10Codex 下载安装指南:Windows 和 macOS 官方版下载