技术栈

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格式标签下载分享
下一篇:审计智能合约的成本是多少?如何审计智能合约?
相关推荐
街尾杂货店&
15 小时前
css word属性
前端·css
Sheldon一蓑烟雨任平生
1 天前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
Demoncode_y
1 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger
1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI
1 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI
1 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
duansamve
2 天前
TS在Vue3中的使用实例集合
typescript·vue3
金梦人生
2 天前
Css性能优化
前端·css
写代码的皮筏艇
2 天前
CSS属性继承与特殊值
前端·css
我有一棵树
2 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04Linux下V2Ray安装配置指南05两千字总结:Codex 国内如何安装和使用的教程,以及如何设置中文回答06KGG转MP3工具|非KGM文件|解密音频07荣耀手机2025年10月发布的新品Magic8比起Magic7,在硬件、性能、价格等上有什么区别,有什么优势08windows找不到gpedit.msc(本地组策略编辑器)09GitLab 零基础入门指南:从安装到项目管理全流程10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南