双重嵌套v-for的简单使用
1.v-for基础语法
v-for在vue的主要使用语法的方式如下：
//js中 data():{ return:{ List:[ {listDataName:1}, {listDataName:2}, {listDataName:3}, {listDataName:4}, ] } }:
<view v-for="(item,index) in List">{{item.listDataName}}</view>
上面的是遍历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++" }, ], } ],
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>
<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>
