技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
ziblog
11 小时前
CSS3白云飘动动画特效
前端·css·css3
半斤鸡胗
11 小时前
css3基础
前端·css
ziblog
11 小时前
CSS3创意精美页面过渡动画效果
前端·css·css3
akangznl
11 小时前
第四章 初识css3
前端·css·css3·html5
会豪
11 小时前
深入理解 CSS3 滤镜(filter):从基础到实战进阶
前端·css·css3
头顶一只喵喵
11 小时前
CSS3进阶知识:CSS3盒子模型,box-sizing:content-box和box-sizing:border-box的讲解
前端·css·css3
小飞大王666
11 小时前
css进阶用法
前端·css
小飞大王666
14 小时前
CSS基础知识
前端·css
摇滚侠
17 小时前
css 设置边框
前端·css
陈振wx:zchen2008
20 小时前
CSS2-3
css·css3·css2
热门推荐
01GitHub 镜像站点02一文了解国产算子编程语言 TileLang,TileLang 对国产开源生态的影响与启示03Claude Code Skills 实用使用手册04Vue-skills的中文文档05OpenCode 入门教程:介绍 · 安装 · 配置第三方 API (如 Claude)06UV安装并设置国内源07在Trae中使用Pencil MCP082025 年大语言模型发展回顾:关键突破、意外转折与 2026 年展望09Clawdbot 中文汉化版 接入微信、飞书10Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services