技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
UIUV
11 小时前
CSS学习笔记:深入理解盒子模型与 box-sizing
前端·css·前端框架
3秒一个大
12 小时前
CSS 盒子模型与 box-sizing 属性:代码解析与概念理解
css
自由日记
12 小时前
css文档流
前端·css·html
2501_93879942
12 小时前
CSS Container Queries:基于父容器的响应式设计
前端·css
CoovallyAIHub
12 小时前
Cursor 2.0 太离谱了!8 个 AI 同时写代码,还能自己测!
css·后端·程序员
天天向上1024
13 小时前
vue3 css使用v-bind实现动态样式
前端·css·vue.js
rising start
1 天前
四、CSS选择器(续)和三大特性
前端·css
Crystal328
1 天前
background属性经典应用(视觉差效果/绘制纸张/绘制棋盘)
前端·css
秦牛正威
1 天前
CSS的 white-space、word-break、overflow-wrap的用法
css
yong9990
1 天前
响应式布局新利器:CSS Grid 的 grid-template-areas 实战
前端·css
热门推荐
01GitHub 镜像站点02《大数据技术原理与应用》实验报告三 熟悉HBase常用操作03UV安装并设置国内源04综合整理:pdf预览显示:你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源,请打开此文件以看其内容,如何解决以正常预览文件05BongoCat - 跨平台键盘猫动画工具06Linux下V2Ray安装配置指南07npm使用国内淘宝镜像的方法08jdk21下载、安装(Windows、Linux、macOS)09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10GitLab 零基础入门指南:从安装到项目管理全流程