技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
han_
4 小时前
前端高频面试题之CSS篇(一)
前端·css·面试
不会玩电脑的Xin.
8 小时前
HTML + CSS
前端·css·html
凯小默
17 小时前
vue3-10-计算属性以及get跟set
vue3
悟能不能悟
18 小时前
<style scoped>vue中怎么引用css文件
css·vue.js
粉末的沉淀
1 天前
css:制作带边框的气泡框
前端·javascript·css
西游音月
1 天前
(4)pytest+Selenium自动化测试-元素定位之CSS Selector定位
css·selenium·pytest
Eshine、
1 天前
解决前端项目中,浏览器无法正常加载带.gz名称的文件
前端·vue3·.gz·.gz名称的js文件无法被加载
Light60
1 天前
Vue3 关键字速查表:从入门到进阶的全景指南
vue3·前端开发·响应式编程·组合式api·ai集成
谢尔登
1 天前
【CSS】样式隔离
前端·css
LQW_home
2 天前
前端展示 接受springboot Flux数据demo
前端·css·css3
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法!免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)06Linux下V2Ray安装配置指南07Google Antigravity:无法登录?早期错误、登录修复和用户反馈指南08Labelme从安装到标注:零基础完整指南09全球最强模型Grok4,国内已可免费使用!(附教程)1046个Nano-banana 精选提示词,持续更新中