vue如何调用data双重数组的数据(双重for循环)_vuedata属性的双重嵌套

双重嵌套v-for的简单使用

1.v-for基础语法

v-for在vue的主要使用语法的方式如下：

//js中
data():{
return:{
List:[
{listDataName:1},
{listDataName:2},
{listDataName:3},
{listDataName:4},
]
}
}:
1
2
3
4
5
6
7
8
9
10
11

<view v-for="(item,index) in List">{{item.listDataName}}</view>
1

上面的是遍历data的List数组,item的含义类似于对象,用来调用List的数据,根据.来调用, 如item.listDataName,而这两个的外面需要加两个{{}},index是遍历的下标,如果第一个数组的数据,那么它的索引就是0,索引从0到数组的总长度-1结束,也就是遍历结束时结束.

2 v-for的双重嵌套调用

2.1 嵌套前准备

首先我们要准备一个Data数组，这个数组里面再存放一个数组，以下是data中数据示例

listfather: [{
						name: "小明",
						skills: [{
								sname: "Java",
							},
							{
								sname: "大数据"
							},

						],
					},
					{
						name: "张三",
						skills: [{
								sname: "C",
							},
							{
								sname: "C++"
							},
						
						],
					}
				],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.2 双重v-for调用数组数据

首先我们调用name是比较简单的遍历一个v-for循环就可以了，但如果我们遍历skills时就会遇到一些问题，需要写两个v-for，第一个v-for遍历的是我们的数组，第二个v-for遍历的是我们第一个v-for“item对象”的skills子数组，那么这样，就可以实现我们想要的双重循环以达到我们取到skills也就是遍历嵌套数组中的数据效果了。以下有具体界面展示、功能代码、全部代码。主要是以演示为主，所以界面比较“简洁”。

<view v-for="(item,index) in listfather" :key="id">
			{{"姓名:"+item.name+"技能:"}}
			<text v-for="(stu,index) in item.skills" :key="sid">
				{{stu.sname}}
			</text>
		</view>
1
2
3
4
5
6

<template>
	<view>
		<view v-for="(item,index) in listfather" :key="id">
			{{"姓名:"+item.name+"技能:"}}
			<text v-for="(stu,index) in item.skills" :key="sid">
				{{stu.sname}}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listfather: [{
						name: "小明",
						skills: [{
								sname: "Java",
							},
							{
								sname: "大数据"
							},

						],
					},
					{
						name: "张三",
						skills: [{
								sname: "C",
							},
							{
								sname: "C++"
							},
						
						],
					}
				],
			}
		},
		methods: {

		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45