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>

效果

相关推荐
ZC跨境爬虫2 分钟前
跟着 MDN 学CSS day_49:定位实例练习从入门到精通
前端·css·学习
用户0595401744638 分钟前
GitHub Actions 自动化测试流水线踩坑实录:一个 `&&` 符号,折腾了 4 小时,但前端事故率降为 0
前端·css
用户059540174461 小时前
大模型多轮对话“失忆”踩坑实录:一次线上事故让我排查了48小时,最终靠 Playwright + Pytest 把记忆锁死
前端·css
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_50:(传统布局方法与网格系统)
前端·css·ui·tensorflow·媒体
颂love2 小时前
Vue3基础入门
前端·学习·vue3
Js_x2 小时前
HTML实现类星露谷小游戏
css·html·css3
rockey62715 小时前
AScript之事件处理脚本
c#·.net·script·动态脚本
biubiubiu_LYQ19 小时前
入门开发者基础篇之CSS浮动布局:一文吃透浮动底层逻辑
前端·css
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_45:媒体查询入门指南——从语法到移动优先实践
前端·css·ui·html·tensorflow·媒体
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_47:(移动优先实战——从手机到宽屏的响应式进化)
前端·css·html·tensorflow·媒体