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>

效果

相关推荐
Solara10 小时前
中文字体子集化实录:3.2MB → 200KB 的完整脚本、踩坑清单与三条反直觉经验
前端·css·架构
CoderYanger15 小时前
Java EE 进阶:2.3 JavaScript
java·开发语言·前端·javascript·css·职场和发展·java-ee
芳心粽伙饭15 小时前
CSS第四章 布局
前端·css·html
CoderYanger16 小时前
Java EE 进阶:2.3 JavaScript 综合案例
java·前端·javascript·css·职场和发展·java-ee·html
梦醒沉醉16 小时前
7、CSS入门——区块盒子与行内盒子
css
labixiong1 天前
transition 写在 CSS 变量上为什么不生效?给变量补张「类型身份证」
前端·css·html
水月清辉1 天前
CSS 常用语法详解
前端·css
言乐62 天前
Python加速器2视频网页加速器
前端·javascript·css·python·音视频
RuoyiOffice2 天前
SpringBoot3+Vue3 招聘 Offer:发出、审批通过、转入职怎么走完
spring boot·vue3·offer·入职·spring boot 3·hrm·招聘管理
今天AI了吗3 天前
2026年三大AI桌面智能体横评:Codex vs Hermes vs WorkBuddy
大数据·前端·css·人工智能·架构