技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
parade岁月
12 小时前
Tailwind CSS v4 — 当框架猜不透你的心思
前端·css
前端Hardy
15 小时前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html
程序员阿耶
18 小时前
5 个让 CSS 起飞的新特性,设计师看了直呼内行
css
前端Hardy
19 小时前
HTML&CSS:纯CSS实现随机转盘抽奖机——无JS,全靠现代CSS黑科技!
css·html
漂流瓶jz
1 天前
BEM、OOCSS、SMACSS、ITCSS、AMCSS、SUITCSS:CSS命名规范简介
前端·css·代码规范
前端Hardy
2 天前
HTML&CSS:高颜值产品卡片页面,支持主题切换
css·html
Never_Satisfied
2 天前
在HTML & CSS中,nth-child、nth-of-type详解
前端·css·html
光影少年
2 天前
前端css如何实现水平垂直居中?
前端·javascript·css
Purgatory001
2 天前
CSS 访问服务器
服务器·前端·css
henry101010
2 天前
DeepSeek生成的HTML5小游戏 -- 黑8台球
前端·javascript·css·游戏·html
热门推荐
01GitHub 镜像站点02【OpenClaw 本地实战 Ep.3】突破瓶颈:强制修改 openclaw.json 解锁 32k 上下文记忆03OpenClaw 使用和管理 MCP 完全指南04Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services05AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南06Clawdbot部署教程:解决‘gateway token missing’授权问题的完整步骤07AI Agent 平台横评:ZeroClaw vs OpenClaw vs Nanobot08Window 10部署openclaw报错node.exe : npm error code 12809让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX :mcp-documents-reader 工具使用指南10网站改了域名,如何查找?