技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
南囝coding
1 小时前
2025年CSS新特性大盘点
前端·css
颜渊呐
2 小时前
Vue3 + Less 实现动态圆角 TabBar:从代码到优化实践
前端·css
yby1541
3 小时前
【人类写的】anki卡片制作入门
css
卸任
4 小时前
解密Flex布局:为什么flex:1仍会导致内容溢出
前端·css·flexbox
Jing_Rainbow
7 小时前
【前端三剑客-9 /Lesson17(2025-11-01)】CSS 盒子模型详解:从标准盒模型到怪异(IE)盒模型📦
前端·css·前端框架
凯小默
9 小时前
04-封装路由初始化方法
vue3
程序员小寒
1 天前
前端高频面试题之CSS篇(一)
前端·css·面试·css3
fruge
1 天前
低版本浏览器兼容方案:IE11 适配 ES6 语法与 CSS 新特性
前端·css·es6
草木红
1 天前
vite 安装 vue3 和 tailwindcss
vue3·vite·tailwindcss
han_
2 天前
前端高频面试题之CSS篇(一)
前端·css·面试
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03【保姆级教程】免费使用Gemini3的5种方法!免翻墙/国内直连04UV安装并设置国内源05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)07“我的电脑”图标没了怎么办 4种方法找回08Labelme从安装到标注:零基础完整指南09全球最强模型Grok4,国内已可免费使用!(附教程)10KGG转MP3工具|非KGM文件|解密音频