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>

效果

相关推荐
cxxcode14 小时前
CSS Loader 与样式处理链路
前端·css
CappuccinoRose15 小时前
CSS、Less、Sass(含 SCSS)、Stylus
前端·css·less·sass·stylus
蜡台2 天前
uniapp vue2 转 vue3
前端·javascript·uni-app·vue3·vue2
用户059540174462 天前
把前端内存泄漏排查从2小时压到5分钟,我们把它集成进了CI
前端·css
随风一样自由2 天前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
zhanghaofaowhrql4 天前
为CSDN博客编辑器安装自定义CSS主题,打造个性化写作界面
前端·css·编辑器
aichitang20244 天前
Claude fable 5与GPT5.5模型能力实测
javascript·css·人工智能·ai·html·html5
SL-staff4 天前
(十六)「JVS-Rules规则引擎 V2.5」— 结束节点
变量·规则引擎·业务系统·jvs·jvs规则引擎·结束节点·规则设计
就叫飞六吧4 天前
F12 控制台日志移植到页面案例
javascript·css·html
gis开发之家4 天前
《Vue3 从入门到大神25篇》手撕 Vue3 响应式原理 —— 手写 Mini-Vue
前端·javascript·vue.js·前端框架·vue3