技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
米奇妙妙wuu
2 小时前
css实现文字和边框同样的渐变色效果
css·html·css3
Sapphire~
5 小时前
Vue3-15 html标签和组件上的ref属性 + 接口泛型
vue3
yaonoran
6 小时前
【无标题】
java·开发语言·变量
EEEzhenliang
7 小时前
CSS样式所有使用方式(书写位置)
前端·css
Irene1991
10 小时前
Vue 3 中使用 Mitt 事件总线
vue3·mitt
Yan.love
12 小时前
【CSS-核心属性】“高频词”速查清单
前端·css
Yan.love
13 小时前
【CSS-动画与过渡】丝滑的艺术,从简单位移到贝塞尔曲线
前端·css
Rattenking
13 小时前
【CSS】---- 根据【张鑫旭-高宽不等图片固定比例布局的三重进化】的思考
前端·css
咸甜适中
14 小时前
双色球、大乐透兑奖分析小程序(rust_Tauri + Vue3 + sqlite)
爬虫·rust·sqlite·vue3·tauri2
Irene1991
14 小时前
CSS 新特性总结(附:var() 函数详解)
css
热门推荐
01GitHub 镜像站点02OpenCode 入门教程:介绍 · 安装 · 配置第三方 API (如 Claude)03在VSCode配置Java开发环境的保姆级教程(适配各类AI编程IDE)04AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南05UV安装并设置国内源06Claude Code Skills 实用使用手册07BongoCat - 跨平台键盘猫动画工具08Linux下V2Ray安装配置指南09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)102025 Telegram 最新免费社工库机器人(LetsTG可[特殊字符])搭建指南(含 Python 脚本)