技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
克里斯蒂亚诺更新
3 小时前
https写一个定位当前位置获取经纬度的H5页面
css·网络协议·https
NEXT06
4 小时前
CSS 选择器深度实战:从“个十百千”权重法到零 DOM 动画的降维打击
前端·css
二DUAN帝
4 小时前
像素流与UE通信
前端·javascript·css·ue5·html·ue4·html5
你脸上有BUG
9 小时前
CSS实现透明内层+渐变边框的优雅方案
前端·css·毛玻璃
独立开发者阿乐
10 小时前
Vue3中Markdown解析与渲染的完整解决方案:从安全到性能优化
web安全·性能优化·vue3·前端开发·语法高亮·markdown解析·markdown-it
m0_50272495
10 小时前
CSS实现容器的宽度由内容决定
前端·css
m0_74824592
10 小时前
常见状态前缀
前端·css
ttod_qzstudio
10 小时前
CSS 样式优先级原则详解:从一个 Vue 组件样式冲突案例说起
前端·css·vue.js
596785154
10 小时前
css装饰
前端·css·css3
qq_41985405
19 小时前
CSS动效
前端·javascript·css
热门推荐
01GitHub 镜像站点02Linux下V2Ray安装配置指南03网站改了域名,如何查找?04Labelme从安装到标注:零基础完整指南05AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南06UV安装并设置国内源07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)08Claude Code Skills 实用使用手册09百度网盘偷偷给电脑“降频”?102025-04-03 Latex学习1——本地配置Latex + VScode环境