技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
yddddddy
1 天前
css的基本知识
前端·css
昔人'
1 天前
css `lh`单位
前端·css
2501_91812691
1 天前
用html5写一个flappybird游戏
css·游戏·html5
孩子 你要相信光
1 天前
css之一个元素可以同时应用多个动画效果
前端·css
小刘鸭地下城
1 天前
优雅表格设计:CSS 美化技巧详解
css
小刘鸭地下城
1 天前
网页深色模式完整实现:从响应式设计到系统主题联动
css
Wiktok
1 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
恶猫
1 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
Hilaku
1 天前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架
Giant100
1 天前
0 基础也能懂的 Flex 布局教程:3 步搞定网页排版
css
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源04Claude Code 平替:OpenAI发布 Codex CLI ,GPT-5 国内直接使用0546个Nano-banana 精选提示词,持续更新中06A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程07conda中设置镜像地址(附所有可换的地址)08KGG转MP3工具|非KGM文件|解密音频09保姆级教程:手把手教你用Dify实现完美多轮对话(附Chatflow和提示词)10突破百度网盘的下载限速,两种方法教会你【超详细】