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>

效果

相关推荐
神膘护体小月半11 小时前
flex 布局的 order 属性
前端·css
java1234_小锋11 小时前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3
绝世唐门三哥13 小时前
CSS 换行三剑客:overflow-wrap、word-break 与 white-space 完全指南
前端·css
易朵朵14 小时前
Z-index
css
CodeMi15 小时前
2026 CSS 接管了这些 JS 的活:6 个 Baseline 特性的落地取舍
javascript·css
gCode Teacher 格码致知20 小时前
前端教学8:提高 CSS 选择器的优先级,有哪些方法?
前端·css·html5
RuoyiOffice1 天前
SpringBoot OA推荐:面向信创选型,看看这套企业协同平台
spring boot·vue3·信创·flowable·企业协同·ruoyi office·oa选型
周厉1 天前
WebSocket 使用场景与实现方法:Java + Vue3 全栈实战
java·websocket·vue3·websocket双向通讯
燕落南枝2 天前
CSS 表单选择器与伪元素选择器详解
前端·css
红红谈说2 天前
同一套产品两个技术栈,双版本前端工程差异怎么收敛?
前端·uni-app·vue3·前后端分离·双版本维护·接口约定