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>

效果

相关推荐
爱看书的小沐27 分钟前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
遇到困难睡大觉哈哈1 天前
CSS中的Element语法
前端·css
gzzeason1 天前
在HTML中CSS三种使用方式
前端·css·html
mrsk1 天前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
Zsnoin能1 天前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
Sapphire~1 天前
重学前端003 --- CSS 颜色
前端·css
爱电摇的小码农1 天前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
一只毛驴1 天前
面试:SASS/LESS/SCSS区别
css
chao_7891 天前
CSS表达式——下篇【selenium】
css·python·selenium·算法
土豆12501 天前
提升CSS开发效率的必备Chrome插件
css·chrome