技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
来碗旺仔
2 小时前
2026年了,CSS 终于能写 if 了
css
Moriarty123666
3 小时前
【前端技巧】实现卡片页面容器全屏
前端·css
大梦想家a
4 小时前
基于 HTML+CSS 的个人生活主页设计与实现
css·html·生活
rockey627
16 小时前
C#脚本引擎之AScript与Z.Expressions.Eval对比
c#·.net·script·expression·动态脚本
梦醒沉醉
20 小时前
3、CSS入门——CSS选择器
css
Z兽兽
1 天前
行内块元素在垂直方向上对齐问题
css·html·css3
小幸运248
1 天前
Vue.js 在博客平台中为何采用响应式系统而非直接操作
css
dsyuan001
1 天前
基于 Vue3 + ElementPlus 极简搭建仿钉钉流程设计器,简洁架构、极易扩展,纯div+css布局
css·架构·钉钉
bjzhang75
1 天前
使用HTML+CSS美化上传进度条展示
前端·css·html
YWL
1 天前
CSS变量与预处理器
前端·css
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)02GitHub 镜像站点03ZCode 周末送额度活动开启:3 亿 Token 免费领取04蜘蛛磁力 搜索引擎大全,如何使用蜘蛛磁力查找磁力链接05历年考研数学一、数学二、数学三真题试卷及答案PDF062026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?07微信历史版本含下载地址( Windows PC | 安卓 | MAC )及设置微信不更新08Agnes AI 免费 API 接入指南:文本、生图、生视频,一套接口全免费09AI 编程 IDE 全景解析 2026:Agent 全面接管开发链路10VSCode+CodeX扩展,无法启动