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>

效果

相关推荐
里欧跑得慢10 小时前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
烂蜻蜓20 小时前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
夏炳辉.21 小时前
Flex布局中 flex: 1 的完整解析与实战指南
前端·css·css3
zhanghaha13141 天前
HTML系列教程:8_HTML 文本格式化标签
前端·css·html
码视野1 天前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
码视野2 天前
基于 Spring Boot + Vue3 的【高校化学实验室安全准入考试与危化品配伍排查系统】设计与实现(含PRD/三端高保真源码/大屏)
前端·人工智能·spring boot·后端·安全·vue3
fxshy2 天前
WebGIS 游戏化实践:基于 Cesium + Vue3 实现全球飞行模拟系统:从球体坐标、飞行动力学到地形碰撞实战
游戏·vue3·cesium·webgis·飞行模拟
csuzhucong2 天前
二十一 - 四十阶魔方
javascript·css·html
言乐62 天前
Python关于老游复刻与创新2
前端·javascript·css·python·css3
jonyleek3 天前
技术实践:基于 Vue3 + Spring Cloud 微服务实现私有化文档系统的类 SaaS 协同体验
微服务·私有化部署·vue3·springcloud·协同编辑·jvs企业文档·无忧企业文档