技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
哈哈O哈哈哈
8 小时前
2025 年值得关注的 CSS 新属性与功能
前端·css
就叫飞六吧
10 小时前
css+js 前端无限画布实现
前端·javascript·css
百***8127
12 小时前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html
xiaoxue..
14 小时前
深入理解浏览器渲染流程:从HTML/CSS/JS到像素呈现
前端·javascript·css·html
汤姆Tom
14 小时前
CSS 自定义属性深度应用:构建动态样式系统
前端·css·面试
鹏多多
17 小时前
CSS渐变色边框的两种实现方案原理+对比与实战
前端·javascript·css
xiangxiongfly915
1 天前
CSS svg
前端·css·svg
程序员小寒
1 天前
前端性能优化之CSS篇
前端·css·性能优化
用户660067668539
2 天前
CSS定位全解析:从static到sticky,彻底搞懂布局核心
前端·css
panda4919
2 天前
css主流布局
前端·css
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法!免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05Google Antigravity:无法登录?早期错误、登录修复和用户反馈指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)07Linux下V2Ray安装配置指南08Spring Boot 4.0 发布总结:新特性、依赖变更与升级指南09全球最强模型Grok4,国内已可免费使用!(附教程)10Labelme从安装到标注:零基础完整指南