技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
Eshine、
11 分钟前
解决前端项目中,浏览器无法正常加载带.gz名称的文件
前端·vue3·.gz·.gz名称的js文件无法被加载
Light60
2 小时前
Vue3 关键字速查表:从入门到进阶的全景指南
vue3·前端开发·响应式编程·组合式api·ai集成
谢尔登
2 小时前
【CSS】样式隔离
前端·css
LQW_home
10 小时前
前端展示 接受springboot Flux数据demo
前端·css·css3
WebGirl
11 小时前
一个 CSS 属性aspect-ratio
css
xump
12 小时前
如何在DevTools选中调试一个实时交互才能显示的元素样式
前端·javascript·css
Lhuu(重开版
19 小时前
CSS:动效布局动画
前端·css
不羁的fang少年
1 天前
前端常见问题(vue,css,html,js等)
前端·javascript·css
yivifu
1 天前
CSS Grid 布局详解(2025最新标准)
前端·css
姜太小白
1 天前
【前端】CSS媒体查询响应式设计详解:@media (max-width: 600px) {……}
前端·css·媒体
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03【保姆级教程】免费使用Gemini3的5种方法!免翻墙/国内直连04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)06Linux下V2Ray安装配置指南07Google Antigravity:无法登录?早期错误、登录修复和用户反馈指南08Labelme从安装到标注:零基础完整指南09全球最强模型Grok4,国内已可免费使用!(附教程)1046个Nano-banana 精选提示词,持续更新中