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>

效果

相关推荐
右耳朵猫AI3 小时前
Web前端周刊2026W34 | CSS类前缀选择器采纳、Lovable迁移TanStack Start、Fastify 6.0 Alpha
前端·css
我才是银古11 小时前
当 360° 全景遇上真实地图:Vue 3 实现全景-地图双向联动的工程实践
3d·vue3·360影像
三十而立洋17 小时前
Flex 与 Grid 布局完全指南
css
CarIise2 天前
事件传播、CSS动画、服务器字体与jQuery
服务器·css·jquery
XLYcmy2 天前
HTML/CSS/JS 基础与 Vue 技术栈深度解析
java·前端·css·html·vue3·vue2·api
风月说与山鬼2 天前
四、Tailwind CSS——间距与尺寸
前端·css·tailwind css
风月说与山鬼2 天前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
里欧跑得慢2 天前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
晓得迷路了2 天前
栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...
前端·javascript·css
CarIise3 天前
下拉菜单HTML/CSS/JS实现
前端·css