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>

效果

相关推荐
鱼仰泳9 小时前
【笔记】解决 CSS:backface-visibility:hidden; 容器翻转 引起的容器内 input不可用
前端·css·笔记
漆黑的莫莫9 小时前
[Vue3 + TS + Vite] CSS穿透
前端·css
坐望云起9 小时前
Tailwind CSS是什么?
前端·css·tailwind css
大漠_w3cpluscom11 小时前
回顾 2024 Google I/O 大会:CSS 和 Web UI 最新动态
前端·css·svg
Boale_H12 小时前
使用css,让div消失在视野中的方法
前端·css
睿智的海鸥12 小时前
html+css+js气球消除小游戏
前端·javascript·css·html
Misnice12 小时前
flex布局中子元素内容超出时,子元素本身出现滚动条实现方法
前端·javascript·css
头顶一只喵喵14 小时前
Vue3基础知识:组合式API中的provide和inject,他们作用是什么?如何使用?以及案例演示
前端·javascript·vue.js·vue3
朝阳3915 小时前
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
css
不爱学英文的码字机器15 小时前
CSS - 深入理解选择器的使用方式
前端·css·css3·html5