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>

效果

相关推荐
AI源码5 小时前
图书馆借阅管理系统
vue3·springboot
钱栈up13 小时前
前端改了三页、后端也动了,用户说「完全没变化」——我在 116 库上找到的三个真凶
css·数据库
燕落南枝18 小时前
CSS 字体样式:颜色、字体族、倾斜、加粗与装饰
前端·css
RuoyiOffice21 小时前
SpringBoot+Vue3 单据校验设计:保存草稿、提交审批、退回重填,各该检查什么?
spring boot·vue3·flowable·表单设计·ruoyi office·草稿保存·单据校验
狮子座的男孩1 天前
html+css基础:24、2D变换(位移/缩放/旋转/扭曲(了解)/多重变换/变换原点)
前端·css·经验分享·html·2d位移·原点变换·缩放/旋转/扭曲
子兮曰1 天前
CSS 复现 23 种设计风格:从拟物到液态玻璃的成本阶梯与兜底写法【实战】
前端·css·视觉设计
燕落南枝2 天前
CSS 学习:类型选择器与 AI 注释实战
css·人工智能·学习
燕落南枝3 天前
CSS 类选择器详解:从入门到实战
前端·css
iCxhust3 天前
模型:500kW飞轮 10kV输电线路 油田抽油机 同时考虑无功补偿 统计:全年节电量 结果56万度电
前端·css·css3·电力·飞轮
燕落南枝3 天前
CSS 后代选择器与子代选择器:从入门到实战
前端·css