技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
漂流瓶jz
21 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·css
C_心欲无痕
1 天前
vue3 - useId生成唯一标识符
前端·javascript·vue.js·vue3
栀秋666
1 天前
Tailwind CSS:用“类名编程”重构你的前端开发体验
前端·css
C_心欲无痕
1 天前
vue3 - watchSyncEffect同步执行的响应式副作用
开发语言·前端·javascript·vue.js·vue3
霍理迪
1 天前
CSS盒模型布局规则
前端·javascript·css
程序员龙语
1 天前
CSS 高级选择器应用
前端·css
程序员修心
1 天前
CSS文本样式全解析:11个核心属性详解
前端·css
苹果电脑的鑫鑫
1 天前
Css画圆弧的方法
前端·css
worxfr
1 天前
CSS Flexbox 布局完全指南
前端·css
Dreamcatcher_AC
1 天前
前端面试高频问题解析
前端·css·html
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看:一次教科书式的业务层饱和攻击03电脑检测软件—图吧工具箱04Web安全中SQL注入绕过WAF的具体手法和实战案例05Linux下V2Ray安装配置指南063D 圣诞树网页代码07UV安装并设置国内源08SQLmap 完整使用指南:环境搭建 + 命令详解 + 实操案例09jdk21下载、安装(Windows、Linux、macOS)10在VSCode配置Java开发环境的保姆级教程(适配各类AI编程IDE)