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>

效果

相关推荐
tryCbest1 小时前
Vue3项目在Nginx中配置代理后端IP
nginx·vue3
雪碧聊技术10 小时前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
小妖66611 小时前
设置了 box-sizing: border-box; 不管用,下边框还是被挤压没了
前端·css·html
柚yuzumi13 小时前
CSS 定位布局:让元素各就各位
前端·css
用户0595401744614 小时前
Qdrant 召回不一致踩坑实录:跑了 300 次测试才发现是索引没刷新
前端·css
用户059540174461 天前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
—Qeyser2 天前
html 可视化海报模板编辑器
css·html·js
我命由我123452 天前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
glustful2 天前
企业内部审计项目管理 系统开源(springboot+vue3)
vue3·springboot
FFF_634560233 天前
简单的画板小工具,下载即用
前端·javascript·css