技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
henry101010
16 小时前
DeepSeek生成的HTML5小游戏 -- 投篮小能手
前端·javascript·css·游戏·html5
lzhdim
17 小时前
CSS实现毛玻璃模糊效果
前端·css
Never_Satisfied
17 小时前
在HTML & CSS中,CSS选中第二个指定类型的子元素的方法
前端·css·html
Never_Satisfied
17 小时前
在HTML & CSS中,图片嵌入文字方法
前端·css·html
麦麦大数据
1 天前
M004_基于Langchain+RAG的银行智能客服系统设计与开发
typescript·langchain·flask·vue3·faiss·rag
NEXT06
2 天前
BFC布局
前端·css·面试
岱宗夫up
2 天前
【前端基础】HTML + CSS + JavaScript 进阶(一)
开发语言·前端·javascript·css·html
岱宗夫up
2 天前
【前端基础】HTML + CSS + JavaScript 基础(三)
开发语言·前端·javascript·css·html
程序员小李白
2 天前
CSS 盒子模型
前端·css·html
Zzz不能停
2 天前
单行 / 多行文本显示省略号(CSS 实现)
前端·css
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services03AI Agent 平台横评:ZeroClaw vs OpenClaw vs Nanobot04【OpenClaw 本地实战 Ep.3】突破瓶颈:强制修改 openclaw.json 解锁 32k 上下文记忆05Clawdbot部署教程:解决‘gateway token missing’授权问题的完整步骤06OpenClaw 安装之(三)DeepSeek模型接入配置和详细配置参数07配置 OpenClaw 使用 Ollama 本地模型08AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南09openClaw安装飞书插件|核心踩坑:spawn EINVAL 错误终极解决指南10全面体验 Grok API 中转站(2025 · Grok 4 系列最新版)