vue简单的二维数组循环嵌套方式
作者:贝壳贝 时间:2024-04-27 16:09:56
二维数组循环嵌套方式
<div class="box">
<div class="color">
<div>蓝色/尺码</div>
</div>
//这是简单的布局
.box{
border: 1px solid red;
display: flex;
}
.color{
display: flex;
}
.color div{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid blue;
}
//样式代码
//在data()创建一个简单的二维数组
//一维数组 名字:[] 二维数组 名字:[ { 名字:[] } ] 数组简单构成
data() {
return {
// sku二维数据
skuData: [
{
skuTitle: '颜色',
skuChild: [
{ skuTitle: '红色', sku: 100, skuId: 1 },
{ skuTitle: '蓝色', sku: 100, skuId: 2 },
]
},
{
skuTitle: '尺码',
skuChild: [
{ skuTitle: 'S', sku: 100, skuId: 3 },
{ skuTitle: 'M', sku: 100, skuId: 4 },
{ skuTitle: 'L', sku: 100, skuId: 5 },
]
}
],
};
},
//完成两层循环的布局
<div v-for="(item,index) in skuData " :key="index" class="box">
<div v-for="(item_,index_) in item.skuChild" :key ="index_" class="color">
<div>{{item_.skuTitle}}</div>
</div>
</div>
//这是循环取出第一层数组,保存在item里面
<div v-for="(item,index) in skuData " :key="index" class="box"></div>
//这是循环出第二层数组,注意要在item里面取出
<div v-for="(item_,index_) in item.skuChild" :key ="index_" class="color"></div>
//两者循环嵌套就完成了
vue循环数组、循环嵌套数组v-for
利用Vue循环输出标签
先在"script"中写入一个数组
之后在上方"div"标签中做循环输出,使用"v-for"
这里的"v-for"标签中,"item"单个数组项,可以随意替换所需要的名称,"list"是"script"中传递来的数组。
整句for语句可以理解为“list”中的"item"单个数组值做循环,当有循环时做添加输出标签。
标签内的"{{item}}"则是将单个数组内容显示在页面上。
效果如下图所示:
这里的数据除了可以将数组内容显示在前端页面,也可以将数组序列号显示显示出来
加上key就可以将数组的序列输出
显示效果如下:
前端页面输出循环嵌套数组
上图数组内容为嵌套形式,分为大标题小标题
之后再html部分编辑循环输出
第一个"ul>li"循环输出大标题,第二个再for语句中,直接查找item下的news子数组,之后,依次输出
输出内容为子数组的"title"
这样就完成了数组嵌套循环
来源:https://blog.csdn.net/weixin_46056625/article/details/114240470
标签:vue,二维数组,循环,嵌套
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
如何在python中实现线性回归
2022-03-29 00:24:30
基于python的Paxos算法实现
2023-04-15 07:40:58
![](https://img.aspxhome.com/file/2023/4/107034_0s.png)
python字符串切割:str.split()与re.split()的对比分析
2022-08-09 20:57:13
Python处理键映射值操作详解
2021-03-21 03:14:53
![](https://img.aspxhome.com/file/2023/5/105255_0s.png)
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2023-04-19 06:39:39
![](https://img.aspxhome.com/file/2023/5/65495_0s.png)
一些sql语句
2009-04-10 18:36:00
Spring Data JPA的Audit功能审计数据库的变更
2024-01-21 18:30:29
![](https://img.aspxhome.com/file/2023/2/81932_0s.png)
vue 单页应用和多页应用的优劣
2024-04-30 10:44:18
![](https://img.aspxhome.com/file/2023/0/130060_0s.jpg)
PLSQL导入dmp文件的详细完整步骤
2023-06-26 11:45:32
![](https://img.aspxhome.com/file/2023/6/63716_0s.png)
Python深入浅出分析元类
2022-01-10 09:09:00
python3 最常用的三种装饰器语法汇总
2021-10-10 15:08:12
Javascript特效--划过放大的列表
2008-03-21 12:18:00
![](https://img.aspxhome.com/file/UploadPic/20083/21/2008321122917663s.jpg)
Python2和Python3的共存和切换使用
2022-12-26 13:05:20
![](https://img.aspxhome.com/file/2023/7/104967_0s.png)
利用Python生成文件md5校验值函数的方法
2023-09-29 14:51:40
MySQL 函数过程递归
2008-07-25 19:32:00
Spring Batch读取txt文件并写入数据库的方法教程
2024-01-27 03:59:32
![](https://img.aspxhome.com/file/2023/6/74766_0s.jpg)
cmd运行python文件时对结果进行保存的方法
2023-03-12 03:18:02
![](https://img.aspxhome.com/file/2023/5/92185_0s.jpg)
DreamWeaver制作会移动的广告条
2008-02-03 11:34:00
PyCharm如何导入python项目的方法
2022-10-23 05:50:35
![](https://img.aspxhome.com/file/2023/6/88926_0s.png)
一行命令搞定node.js 版本升级
2024-05-13 09:30:14