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>

效果

相关推荐
软件技术NINI6 小时前
圣罗兰彩妆html+css 4页
前端·css·html
溪语流沙8 小时前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js
传人once12 小时前
企业官网静态页基础结构如何搭
javascript·css
damoluomu13 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html
程序员大阳13 小时前
副队长HTML+CSS博客网站实战 (1)–项目介绍与整体规划
css·html·实战·教程·博客网站·规划
程序员大阳13 小时前
副队长HTML+CSS博客网站实战 (3)–首页主体:Grid 文章卡片 + 侧边栏布局
css·html·侧边栏·博客网站·首页·文章卡片
程序员Sunday13 小时前
Flex 和 Grid 有什么区别?一维布局、二维布局怎么选?
前端·css·面试
RuoyiOffice14 小时前
SpringBoot3+Vue3 企业 AI 工作流:Tinyflow 画布、LLM 节点与在线试跑怎么落地
spring boot·大模型·vue3·agent·ai工作流·ruoyi office·tinyflow
爱喝水的小周14 小时前
实验十一 Vuex 实现王者荣耀后台比赛管理系统
前端·css·html
橘猫走江湖14 小时前
浮动塌陷复现失败:父元素为什么一直不塌
前端·css