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>

效果

相关推荐
千码君201617 小时前
React Native:关于react自定义css属性的位置
css·react native·react.js·前端框架·ecmascript·组件嵌套
超级大只老咪19 小时前
字段行居中(HTML基础语法)
前端·css·html
三月暖阳20 小时前
分享并记录日常开发中的一些CSS布局和样式技巧(持续更新)
css·scss
汤姆Tom21 小时前
现代 CSS 架构与组件化:构建可扩展的样式系统
前端·css
汤姆Tom1 天前
CSS 最佳实践与规范
前端·css
志摩凛1 天前
前端必备技能:使用 appearance: none 实现完美自定义表单控件
前端·css
我有一棵树1 天前
浏览器/用户代理默认样式、any-link 伪类选择器
前端·css·html
西洼工作室2 天前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
软件技术NINI2 天前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
前端Hardy2 天前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css