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>

效果

相关推荐
小小码农Come on4 分钟前
QPushButton QSS(一):按钮常用qss
前端·javascript·css·qt5
Sheldon一蓑烟雨任平生1 小时前
Sass 星空(Sass + keyframes 实现星空动画)
前端·css·vue3·sass·keyframes
Dreamy smile2 小时前
css :nth-child() 完全用法指南
前端·css
老前端的功夫3 小时前
抛弃 `!important`,让 CSS 优先级变大
前端·javascript·css·npm·node.js
bin91533 小时前
(文后附完整代码)html+css+javascript 弹球射击游戏项目分析
前端·javascript·css·游戏·html·前端开发
Irene199115 小时前
Vue 3 中移除了 $on、$off 和 $once 方法(附:Composables 组合式函数 使用详解)
vue3
HWL567917 小时前
显示器缩放和更改分辨率的区别
前端·css·vue.js·计算机外设·html5
鄭郑1 天前
【Playwright 学习笔记 03】CSS选择器 定位方法
css·笔记·学习·playwright
EEEzhenliang1 天前
CSS的注释
前端·css
幻影星空VR元宇宙1 天前
飞行影院投资成本详解:球幕影院投资多少能实现盈利
css·百慕大冒险·幻影星空