技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
行走的陀螺仪
13 小时前
Sass 详细指南
前端·css·rust·sass
熊猫钓鱼>_>
15 小时前
Vue3 + Tailwind CSS + DaisyUI 现代前端开发完全攻略
前端·css·vue.js·vue3·tailwind·daisyui·现代开发
小白_ysf
17 小时前
Vue3+TS项目中高德地图组件封装(集成关键词搜索、输入提示、标记点、信息弹窗和数据回显)
vue3·ts·高德·地图 js api
ssshooter
20 小时前
为什么移动端 safari 用 translate 移动元素卡卡的
前端·css·性能优化
wusp1994
21 小时前
【超完整】Tailwind CSS 实战教程
前端·css·tailwind
前天的五花肉
1 天前
D3.js研发Biplot(代谢)图
前端·javascript·css
lcc187
1 天前
CSS 浮动
css
编代码的小王
1 天前
【无标题】
前端·css
be or not to be
1 天前
HTML 与 CSS 基础入门笔记
css·笔记·html
霍理迪
1 天前
CSS复合、关系、属性、伪类选择器
前端·javascript·css
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程(适配各类AI编程IDE)05Multisim使用教程详尽版--(2025最新版)06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)07Gemini3 生成的基于手势控制3D粒子圣诞树08CentOS的ISO镜像下载09Labelme从安装到标注:零基础完整指南10BongoCat - 跨平台键盘猫动画工具