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>

效果

相关推荐
Beyond_System|系统之外8 小时前
一个网页如何同时适配投影仪、1366×768 和 1920×1080?我重新理解了“自适应布局”
开发语言·css·html
Claire_888 小时前
从零搭建网页:我用AI生成HTML/CSS/JS的实践与工具整理
css·人工智能·html
平头哥~9 小时前
Day 21 | animation 与 keyframes:把动画从 A 到 B 变成多点编排
前端·css·css3·css学习
里欧跑得慢1 天前
Flutter主题与样式详解
前端·css·flutter·web
toooooop81 天前
智慧文旅数字人体验平台demo html
css·css3
yume_sibai1 天前
CSS2 核心知识点完全总结(选择器 + 三大特性 + 常用属性)
前端·css
小刘在重生~1 天前
Web 前端基础|HTML+CSS+JavaScript+Bootstrap
前端·css·html
吴长建先生重名了1 天前
如何撩妹子实战:搞定StackTrace,面试必问的底层逻辑
css
是立不是利1 天前
第二篇:CSS 与用户体验——看不见的设计
前端·css·ux
神膘护体小月半1 天前
mask 渐变遮罩属性
前端·css·css3