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>

效果

相关推荐
可视之道8 小时前
CSS Container Queries 在组态大屏中的实战
css
RuoyiOffice11 小时前
SpringBoot3+Vue3 接口访问日志实战:@ApiAccessLog 慢接口、参数脱敏与 OperateLog 如何分工
spring boot·vue3·traceid·spring boot 3·访问日志·apiaccesslog·操作日志
tryCbest1 天前
Vue3项目在Nginx中配置代理后端IP
nginx·vue3
雪碧聊技术1 天前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
小妖6661 天前
设置了 box-sizing: border-box; 不管用,下边框还是被挤压没了
前端·css·html
柚yuzumi2 天前
CSS 定位布局:让元素各就各位
前端·css
用户059540174462 天前
Qdrant 召回不一致踩坑实录:跑了 300 次测试才发现是索引没刷新
前端·css
用户059540174462 天前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
—Qeyser3 天前
html 可视化海报模板编辑器
css·html·js
我命由我123453 天前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js