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>

效果

相关推荐
敲敲了个代码8 小时前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·javascript·css·学习·面试
少云清9 小时前
【软件测试】5_基础知识 _CSS
前端·css·tensorflow
西洼工作室18 小时前
CSS响应式布局全攻略
前端·css·响应式布局·栅格系统
鹤归时起雾.19 小时前
CSS属性继承与元素隐藏全解析
前端·css
合作小小程序员小小店20 小时前
web网页开发,在线%物流配送管理%系统,基于Idea,html,css,jQuery,java,ssh,mysql。
java·前端·css·数据库·jdk·html·intellij-idea
华仔啊21 小时前
20个CSS实用技巧,10分钟从小白变大神!
前端·css
昔人'21 小时前
grid: auto-fit 和 auto-fill区别
css·grid
小白每天学一点1 天前
微信小程序开发学习-8
javascript·css·微信小程序·小程序·html
合作小小程序员小小店2 天前
web网页开发,在线%人力资源管理%系统,基于Idea,html,css,jQuery,java,jsp,ssh,mysql。
java·前端·css·数据库·mysql·html·intellij-idea
这个一个非常哈2 天前
VUE篇之推送+瀑布流
css·vue.js·css3