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 分钟前
CSS 的 Flex 布局——为什么元素没有按我想的排列
前端·css
java1234_小锋19 小时前
【技术专题】CSS3 网页技术 - CSS3 盒模型
前端·css·css3
前端架构师-老李20 小时前
HTML与CSS基础第四课—strong、em、b、i 各表示什么
前端·css·html
程序00721 小时前
天地图实现收货地址定位
前端·javascript·css
汤米粥1 天前
目前流行的前端 CSS 框架
前端·css·bootstrap·ant design·‌tailwind css·bulma
是立不是利1 天前
CSS 的层叠与优先级——为什么我的样式不生效
前端·css
AI源码2 天前
巨峰影视影院
vue3
前端架构师-老李2 天前
HTML与CSS基础第二课—初识HTML
前端·css·html
java1234_小锋2 天前
【技术专题】CSS3 网页技术 - CSS3 单位、颜色、字体与文本
前端·css·css3
RuoyiOffice2 天前
UniApp企业办公:把审批、客户和项目装进手机,能做些什么?
spring boot·vue3·uniapp·crm·flowable·移动办公·企业应用