vue3中css使用script中定义的变量

代码

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>

效果

相关推荐
一水鉴天6 小时前
统一对象拓扑(UOT)设计全链定稿:从三件事分离到三继承 之1 20261010(豆包“查看聊天内容”继续)
前端·css
RuoyiOffice9 小时前
SpringBoot+Vue3+Onlyoffice 企业文件生命周期:上传、业务关联、权限、版本与安全清理
spring boot·vue3·文件管理·对象存储·权限控制·ruoyi office·附件管理
song50115 小时前
React Native for OpenHarmony 实战:三方库 react-native-css-transformer 的鸿蒙化适配指南
css·人工智能·深度学习·react native·transformer
思码梁田1 天前
CSS transform 转换详解:translate、rotate、scale、skew 与 3D 变换一次讲清
前端·css·transform·skew·scale·translate·rotate
三天不学习2 天前
Tailwind CSS 快速入门(2026 版):从 v4 零配置上手,到「该不该用、怎么用好」的选型实战
前端·css·tailwind
htzyl2062 天前
前端阶梯——第九章、颜色、文本与背景
前端·css
htzyl2062 天前
前端阶梯——第八章、CSS入门与选择器
前端·css
传人3 天前
页面中心圆圈放大效果如何写
前端·css
格数致用3 天前
03- Luckysheet与Vue3+Electron集成实战指南
electron·vue3·luckysheet
被摘下的星星3 天前
CSS 基础说明
前端·css