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 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
呆呆的心18 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
Modify_QmQ19 小时前
leaflet【十一】地图瓦片路径可视化
gis·vue3·leaflet·leafletmapblock
AA-代码批发V哥20 小时前
CSS之布局详解指南
css
拾光拾趣录1 天前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter1 天前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
FogLetter1 天前
前端性能优化:深入理解回流与重绘
前端·css
浪裡遊1 天前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录1 天前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee1 天前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法