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>

效果

相关推荐
梯度下降者1 小时前
Python从0到100(三):Python中的变量介绍
python·作用域·变量·数据类型·计算机常识
前端架构师-老李1 天前
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识
前端·css·html
Nymph_Zhu1 天前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
echome8881 天前
CSS 布局:Flex 和 Grid 怎么选,附常见坑
前端·css·html
Nymph_Zhu1 天前
pdf转换markdown预览及内容互相点击定位
前端·pdf·vue3·markdown·element-plus
东鹏特饮1 天前
本机状态监控页面html
运维·css·html·css3
蓝莓味的口香糖2 天前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
是立不是利2 天前
CSS 的 Flex 布局——为什么元素没有按我想的排列
前端·css
java1234_小锋3 天前
【技术专题】CSS3 网页技术 - CSS3 盒模型
前端·css·css3
前端架构师-老李3 天前
HTML与CSS基础第四课—strong、em、b、i 各表示什么
前端·css·html