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>

效果

相关推荐
码视野8 小时前
基于 Vue3 + Element Plus 的【企业级 AI 智能体工作流与私有知识库 (RAG) 协同平台】设计与实现(附完整源码与PRD)
人工智能·vue3
feixing_fx13 小时前
告别枯燥字体:Web 字体加载策略与 font-display 最佳实践
前端·css·前端框架·交互·css3
筱璦15 小时前
PHP+ VUE3机构级股票分仓管理交易系统源码可出
开发语言·php·vue3·量化·股票分仓
ly768917 小时前
CSS 从入门到进阶:系统掌握现代网页样式与布局
前端·css
前端技术官17 小时前
一行 CSS 新特性干掉 20 行 JavaScript ?
css·滚动驱动动画·容器查询·:has()·anchor positioning
Beginner x_u20 小时前
Tailwind CSS 速通:有 CSS 基础的实战入门
css·tailwindcss·工程化
WL_arm2 天前
Vibe Coding(氛围编程)入门
javascript·css·人工智能·html5
谙忆10243 天前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
01_ice3 天前
前端学习css
前端·css·学习
zh_xuan3 天前
个人主页左侧菜单支持分组,以及菜单显示和隐藏
前端·javascript·css