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>

效果

相关推荐
加个鸡腿儿5 小时前
经验分享2:SSR 项目中响应式组件的闪动陷阱与修复实践
前端·css·架构
华仔啊6 小时前
写 CSS 用 px?这 3 个单位能让页面自动适配屏幕
前端·css
菩提小狗7 小时前
Sqli-Labs Less-3 靶场完整解题流程解析-豆包生成
前端·css·less
web小白成长日记12 小时前
CSS 作用域隔离实战:React、Vue 与 Styled Components 的三种范式
前端·css·vue.js·react.js
@@小旭1 天前
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置
前端·javascript·css
Irene19911 天前
CSS 定位属性(relative、absolute、fixed、sticky)与实用技巧总结
css
我的写法有点潮1 天前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
Cherry的跨界思维1 天前
【AI测试全栈:Vue核心】22、从零到一:Vue3+ECharts构建企业级AI测试可视化仪表盘项目实战
vue.js·人工智能·echarts·vue3·ai全栈·测试全栈·ai测试全栈
m0_502724951 天前
vue动态设置背景图片后显示异常
前端·css
@Autowire1 天前
Layout-position
前端·css