技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
gis开发之家
11 小时前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3
思码梁田
14 小时前
CSS letter-spacing 属性详解:掌控字符之间的呼吸感
前端·css
贾伟康
17 小时前
【安心陪诊 Agent v1.1】首页可信设计实战:HTML/CSS 状态卡与急症分流
css·html·harmonyos·ai agent·首页设计
AZaLEan__
17 小时前
CSS文档流相关:BFC
前端·css
‘’林花谢了春红‘’
1 天前
小玩意 生日快乐
css·html·css3
梨想橙汁
1 天前
CSS零基础入门:语法、引入方式与基础样式全解析
css
七牛开发者
1 天前
RAG 工程里的上下文剪枝:如何减少 68% 的上下文
前端·css·github
叉歪
2 天前
为 UnoCSS 扩展无限色阶与主题换色
前端·css
TheITSea
2 天前
4、React+Tailwind CSS
前端·css·react.js
iCOD3R
2 天前
Skill - kill-ai-slop 解决“AI 味”样式
前端·css·ai编程
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震:GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03AI科技热点日报 | 2026年07月01日04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05Codex 下载安装指南:Windows 和 macOS 官方版下载06国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)07AI 编程 IDE 全景解析 2026:Agent 全面接管开发链路082026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?09GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna:官方性能数据与选型分析10昇腾910B系列芯片完全指南:四款型号对比、服务器选型与大模型部署实战