那么在Vue中怎样将这个一对多的数据循环都显示出来。
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现两层循环嵌套
<div v-for="(item,index) in this.bcxingxidata" :key="index">
<divv-if="item.bclx=='0'">
<h1 style="color:red">班次名称：{{item.bcmc}}</h1>
<ul v-for="(data,k) in item.bcglXiangXiList" :key="k">
<li>打卡时间段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}}</li>
<divv-if="item.bclx=='1'">
<h1 style="color:red">班次名称：{{item.bcmc}}</h1>
<ul v-for="(data,k) in item.bcglXiangXiList" :key="k">
<li>最早下井时间：{{data.dkkssj}}</li>
<li>最晚下井时间：{{data.dkjssj}}</li>
<li>最短下井时长：{{data.zxjxljsj}}</li>
<li>最长下井时长：{{data.zdjxljsj}}</li>
使用外面一层的item即代表每个对象，获取其多的那个list再次进行循环。
这里是使用了v-if进行了判断，根据外层循环的某属性的不同值显示不同的模板。
如果是三层嵌套循环或者更多的话同上
<div v-for="(item,index) in this.bczxingxidata" :key="index">
<h1 style="color:red">班次组名称：{{item.bczmc}}</h1>
<div v-for="(ele,j) in item.kqBcglList" :key="j">
<h2>班次名称：{{ele.bcmc}}</h2>
<div v-if="ele.bclx=='0'">
<ul v-for="(data,k) in ele.bcglXiangXiList" :key="k">
<li>打卡时间段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}}</li>
<div v-if="ele.bclx=='1'">
<ul v-for="(data,k) in ele.bcglXiangXiList" :key="k">
<li>最早下井时间：{{data.dkkssj}}</li>
<li>最晚下井时间：{{data.dkjssj}}</li>
<li>最短下井时长：{{data.zxjxljsj}}</li>
<li>最长下井时长：{{data.zdjxljsj}}</li>
场景业务场景中常有一对多的情况。后端在给前端返回数据时是一个对象的list，为每个对象的有一个属性是多的那个的对象的list。比如后台给前端返回的数据示例如下那么在Vue中怎样将这个一对多的数据循环都显示出来。注：博客：https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现实现两层循环嵌套 <div v-for="(item,index) i...
<div v-for="(item,index) in person">
我叫{{item.name}},我每天上午:
<!-- 注:item.daily是把item取出来给第二层用 -->
<div v-for="(items,indexs) in item.daily">
{{items.am}}
v-for解释
用v-for指令根据一组数组的选项列表进行渲染，**v-for**指令需要使用**item in items**，
item是对象别名，items是源数据数组（名）。比如item为student,那么我们提取的JSON数据
可能包括student的多个属性。如名字,学号，性别等等。
v-for例子
官网例子：
Vue.js 中使用最多的两个指令就是 v-if 和 v-for ，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式：
在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时， v-for 会优先作用。
在 vue 3.x 中， v-if 总是优先于 v-for 生效。
接下来我们通过一个简单的示例来感知下，假设我们想要实现一个极简的 todoList 效果：
我们有一个 todoList：
const todoList = [
id: 0,
task: '吃饭',
done: true,
实现v-for循环嵌套
首先要明白其中的逻辑关系，笔者本次项目中使用的是双层列表嵌套，通过关联这两层进行数据传输。首先通过v-for传入数据，实现外层元素循环，然后再通过内外侧关联，将内层数据传到对应的外层进行循环渲染。
1、对外层标签使用v-for进行数据绑定，循环渲染数据
给外层标签使用v-for进行数据绑定，然后在对应标签用mastache（双大括号）传值
2、给内层数据做同样处理，v-for绑定进行数据循环渲染，双大括号在对应的标签内插值
注意：在对第二层数据使用v-for的时候命名要与外层关联
使用v-for循环的目的就是为了处理大量类型重复的数据，归根结底是一种有规律的数据，但是有些规律却不是那么容易的，很多时候，我们会使用到循环，甚至多重循环的嵌套，不同的循环嵌套对应着不同的json数据的结构，本篇主要讲述的是使用v-for循环解决部分同，部分不同的情况，主要是针对表格table来使用的。
模拟的json数据如下：
"name":"小王",
"age":20,
"ph...
<div class="item"
v-for="(item,index) in regionlist" :key="index">
<div class="introduce">
<div class="title">{{item.title}}</div>
<span...
