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>

效果

相关推荐
RuoyiOffice12 小时前
2026最推荐基于SpringBoot+Vue3的项目管理经营一体化:从商机、合同、任务与工时走到回款和利润
spring boot·项目管理·vue3·crm·合同管理·ruoyi office·项目经营
刃神太酷啦12 小时前
前端入门第一课:HTML 基础语法 + 常用标签 + 实战全解
服务器·c语言·前端·javascript·css·c++·html
扶苏10021 天前
CSS 图标换色指南:用 brightness / invert / mask 把任意图片改成想要的颜色
css
我命由我123451 天前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
RuoyiOffice1 天前
SpringBoot+Vue3 节日主题换肤实战:一条参数换全站配色,节后自动还原
spring boot·vue3·spring boot 3·vben admin·ruoyi office·节日主题·换肤方案
zhanghaha13141 天前
HTML系列教程:18_HTML / CSS 颜色零基础详解
css·html·tensorflow
Aaswk1 天前
从 HTML/CSS/JS 到 Vue + Axios 的一篇实战笔记
前端·css·vue.js·html
liulilittle2 天前
麻将节点间路由转发链:失败回退与错误传播语义(ROUTE_SEMANTICS)
ai·自动化·llm·mock·测试·script·tools
xieliyu.2 天前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
RuoyiOffice3 天前
SpringBoot3+Vue3 流程抄送已读:打开详情消红点,待办与知会怎么分开
spring boot·vue3·flowable·spring boot 3·ruoyi office·流程抄送·已读回执