技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
gsls200808
14 小时前
vue3学习笔记
笔记·vue3
Amumu12138
15 小时前
CSS简介
前端·css
温轻舟
21 小时前
前端可视化大屏【附源码】
前端·javascript·css·html·可视化·可视化大屏·温轻舟
糖糖TANG
1 天前
学成在线 案例练习
前端·css
1314lay_1007
1 天前
color: var(--el-color-success); CSS里面使用函数
前端·css
Kyl2n
1 天前
【密码口令保存小工具】
javascript·css·css3
银烛木
1 天前
黑马程序员前端h5+css3
前端·css·css3
听海边涛声
1 天前
CSS3 图片模糊处理
前端·css·css3
小黑的铁粉
2 天前
使用 min-height: 0 为什么可以防止 flex 项目溢出?
前端·css
henry101010
2 天前
DeepSeek生成的网页小游戏 - 单人壁球挑战赛
javascript·css·游戏·html5
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services03BongoCat - 跨平台键盘猫动画工具04openClaw安装飞书插件|核心踩坑:spawn EINVAL 错误终极解决指南05HTB 赛季10 - Pterodactyl - user06UV安装并设置国内源07openclaw配置教程(linux+局域网ollama)08openclaw 配置飞书 报错 应用未建立长连接09243 行 microGPT:把“训练 + 推理”拆到骨头里10如何解决 OpenClaw “Pairing required” 报错:两种官方解决方案详解