技术栈

vue3中css使用script中定义的变量

梁云亮2023-09-12 13:18

代码

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>

效果

上一篇:YOLO目标检测——密集人群人头数据集+已标注yolo格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
念念不忘 必有回响
16 小时前
前端判断文本是否溢出:单行与多行场景的完整解析
前端·javascript·css·vue.js
@菜菜_达
17 小时前
CSS是什么?
前端·css
Amumu12138
17 小时前
CSS基础选择器
前端·css
陆枫Larry
21 小时前
CSS 踩坑笔记:为什么列表底部的 margin-bottom 总是“失效”?
css
陆枫Larry
21 小时前
深入浅出:CSS 中的“隐形结界”——BFC 详解
前端·css
沛沛老爹
1 天前
Vue3+TS实战:基于策略模式的前端动态脱敏UI组件设计与实现
前端·ui·vue3·数据安全·策略模式·动态渲染·前端脱敏
coding随想
1 天前
深入Modernizr源码:揭秘CSS伪类检测的底层逻辑
前端·css
程序员林北北
1 天前
【前端进阶之旅】50 道前端超难面试题(2026 最新版)|覆盖 HTML/CSS/JS/Vue/React/TS/ 工程化 / 网络 / 跨端
前端·javascript·css·vue.js·html
gsls200808
2 天前
vue3学习笔记
笔记·vue3
Amumu12138
2 天前
CSS简介
前端·css
热门推荐
01PHP Error: 常见错误及其解决方法02GitHub 镜像站点03Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services04HTB 赛季10 - Pterodactyl - user05爬虫逆向之观安(观镜WEB应用安全防护系统)06UV安装并设置国内源07openClaw安装飞书插件|核心踩坑:spawn EINVAL 错误终极解决指南08243 行 microGPT:把“训练 + 推理”拆到骨头里09关于 nvidia-smi: no devices were found 解决方案10openclaw配置教程(linux+局域网ollama)