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>

效果

相关推荐
麦麦大数据9 小时前
M004_基于Langchain+RAG的银行智能客服系统设计与开发
typescript·langchain·flask·vue3·faiss·rag
NEXT0614 小时前
BFC布局
前端·css·面试
岱宗夫up14 小时前
【前端基础】HTML + CSS + JavaScript 进阶(一)
开发语言·前端·javascript·css·html
岱宗夫up15 小时前
【前端基础】HTML + CSS + JavaScript 基础(三)
开发语言·前端·javascript·css·html
程序员小李白1 天前
CSS 盒子模型
前端·css·html
Zzz不能停1 天前
单行 / 多行文本显示省略号(CSS 实现)
前端·css
键盘鼓手苏苏1 天前
Flutter for OpenHarmony:csslib 强力 CSS 样式解析器,构建自定义渲染引擎的基石(Dart 官方解析库) 深度解析与鸿蒙适配指南
css·flutter·harmonyos
xiaoxue..1 天前
TailwindCSS:从“样式民工”到“UI乐高大师”的逆袭
前端·css·ui
Amumu121381 天前
CSS引入方式
前端·css
PieroPc2 天前
用html+css+js 写一个Docker 教程
javascript·css·docker·html