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>

效果

相关推荐
H_z_q24015 小时前
Web前端制作一个评论发布案例
前端·javascript·css
西红市杰出青年7 小时前
CSS 选择器详细教程:原理、语法、方向/“轴”与实战
css·python
HWL567910 小时前
一个CSS属性will-change: transform
前端·css
无法长大12 小时前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
RFCEO13 小时前
前端编程 课程十、:CSS 系统学习学前知识/准备
前端·css·层叠样式表·动效设计·前端页面布局6大通用法则·黄金分割比例法则·设计美观的前端
吉吉安13 小时前
双层文字扫光效果
前端·javascript·css
沙丁鱼意大利面13 小时前
五子棋(javascript)
javascript·css·css3
_OP_CHEN13 小时前
【前端开发之CSS】(六)CSS 弹性布局(Flex)完全指南:从入门到精通,搞定所有布局需求
前端·css·html·flex布局·弹性布局·界面美化·页面开发
萧曵 丶14 小时前
CSS3 业务开发高频样式
前端·css·css3
魔都吴所谓14 小时前
【html】倒计时器实现demo
javascript·css·html