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>

效果

相关推荐
rockey6276 小时前
基于AScript的JavaScript脚本语言发布啦
javascript·c#·.net·js·script
甜味弥漫10 小时前
一文搞懂 Flex 弹性布局:为什么它成为现代 CSS 布局的首选?
css
用户0595401744618 小时前
AI记忆存储一致性踩坑实录:每天手工回归200条对话,直到我用pytest+Redis搭建自动化验证
前端·css
gis开发之家18 小时前
《Vue3 从入门到大神32篇》Vue3 源码详解(二):从 GitHub Clone 到断点调试,手把手搭建源码阅读环境
vue.js·前端框架·github·vue3·vue3源码
gis开发之家1 天前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3
思码梁田2 天前
CSS letter-spacing 属性详解:掌控字符之间的呼吸感
前端·css
贾伟康2 天前
【安心陪诊 Agent v1.1】首页可信设计实战:HTML/CSS 状态卡与急症分流
css·html·harmonyos·ai agent·首页设计
AZaLEan__2 天前
CSS文档流相关:BFC
前端·css
‘’林花谢了春红‘’2 天前
小玩意 生日快乐
css·html·css3
梨想橙汁2 天前
CSS零基础入门:语法、引入方式与基础样式全解析
css