技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
冰暮流星
1 天前
css3网格布局2
前端·css·css3
凯小默
1 天前
19-项目路由规则介绍
vue3
沐风。56
1 天前
css函数
前端·css·css3
沐风。56
1 天前
通过js动态更新css变量
javascript·css·tensorflow
BD_Marathon
1 天前
【JavaWeb】CSS_三种引入方式
前端·css
Hy行者勇哥
1 天前
HTML5 + 原生 CSS + 原生 JS 网页实现攻略
javascript·css·html5
小王码农记
2 天前
CSS中自定义属性函数var()
前端·css·vue.js
鹤归时起雾.
2 天前
Vue3响应式编程核心指南
开发语言·vue3
BD_Marathon
2 天前
【JavaWeb】CSS浮动
前端·css
写代码的皮筏艇
2 天前
CSS中常使用的函数
前端·css
热门推荐
01GitHub 镜像站点02【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像(2025最新版)03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)04智能库存管理的需求预测模型:从业务痛点到落地代码的完整实践05UV安装并设置国内源06React CVE-2025-55182漏洞排查与修复指南07BongoCat - 跨平台键盘猫动画工具08Linux下V2Ray安装配置指南09本地部署阿里最新开源的Z-Image10打造高效订单处理!ZKmall开源商城的统一履约中心架构解析