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>

效果

相关推荐
DsirNg1 小时前
响应式的真正输入:为组件重新定义可用空间
css·flexbox·grid·前端架构·响应式布局·设计系统·container queries
PYB32 小时前
【Web·基础学习】基础布局
css·html·web
晓得迷路了2 小时前
栗子前端技术周刊第 148 期 - Turborepo 2.11、Chrome 154 iframe、Node.js 26...
前端·javascript·css
cindershade8 小时前
响应式的真正输入:为组件重新定义可用空间
css·flexbox
RuoyiOffice6 天前
2026最推荐基于SpringBoot+Vue3的项目管理经营一体化:从商机、合同、任务与工时走到回款和利润
spring boot·项目管理·vue3·crm·合同管理·ruoyi office·项目经营
刃神太酷啦6 天前
前端入门第一课:HTML 基础语法 + 常用标签 + 实战全解
服务器·c语言·前端·javascript·css·c++·html
扶苏10027 天前
CSS 图标换色指南:用 brightness / invert / mask 把任意图片改成想要的颜色
css
我命由我123457 天前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
RuoyiOffice7 天前
SpringBoot+Vue3 节日主题换肤实战:一条参数换全站配色,节后自动还原
spring boot·vue3·spring boot 3·vben admin·ruoyi office·节日主题·换肤方案
zhanghaha13147 天前
HTML系列教程:18_HTML / CSS 颜色零基础详解
css·html·tensorflow