技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
叫我阿柒啊
13 小时前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
神秘人X707
14 小时前
Ansible变量全解析:定义、作用域与实战
ansible·变量
JQLvopkk
14 小时前
CSS学习及心得之二
css·学习·tensorflow
muyouking11
17 小时前
一文吃透 CSS 伪类:从「鼠标悬停」到「斑马纹表格」的 30 个实战场景
前端·css
TE-茶叶蛋
17 小时前
scss 转为原子css unocss
前端·css·scss
Sapphire~
17 小时前
重学前端012 --- 响应式网页设计 CSS变量
前端·css
家里有只小肥猫
17 小时前
css中的v-bind 动态变化
前端·css
光年像素
1 天前
前端开发的“三剑客”—— HTML、CSS、JavaScript
javascript·css·html5
前端与小赵
1 天前
渐变背景色和渐变字体颜色的实现方法
css·html·css3
Mo_jon
1 天前
CSS 瀑布流图片简易实现
前端·css·css3
热门推荐
012025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享,全网首发高质量!!!022025年数学建模国赛C题超详细解题思路03UV安装并设置国内源04奈飞工厂官网,国内Netflix影视在线看|中文网页电脑版入口05Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code06KGG转MP3工具|非KGM文件|解密音频072025高教社杯国赛数学建模选题建议+初步分析08不再让Windows更新!&Edge游戏助手卸载及关闭自动更新09A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程102025全国大学生数学建模C题保姆级思路模型(持续更新):NIPT 的时点选择与胎儿的异常判定