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>

效果

相关推荐
jjw_zyfx2 小时前
css vue vite实现闪烁的呼吸效果
javascript·css·vue.js
xcLeigh7 小时前
Go入门:短变量声明的陷阱与最佳实践
java·redis·golang·教程·变量
gis开发之家8 小时前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
Mh1 天前
如何使用GSAP实现一个 `pinned` 滚动楼层叙事?
前端·javascript·css
郭wes代码2 天前
纯 CSS+JS 实战:手搓一张支持自定义的通用金色电子奖状(万字详细拆解)
前端·javascript·css
竹枝溪2 天前
从零吃透CSS(一):CSS基础语法与样式美化
前端·css·选择器·前端三剑客
用户059540174463 天前
把AI对话记忆测试从手动比对到Pytest+Redis自动化,验证效率提升了10倍,还顺带揪出3个隐蔽bug
前端·css
用户059540174464 天前
把AI聊天机器人记忆存储测试从3小时压到5分钟,我用Pytest + Docker搭了一套自动化回归
前端·css
STU学生网页设计6 天前
大一学生作品《前端框架开发技术》 期末网页制作 HTML+CSS+JavaScript 个人主页网页设计实例
css·前端框架·html
用户059540174466 天前
大模型长记忆评测踩坑实录:2000条错位记忆,让我排查了整整3小时
前端·css