vue v-for循环嵌套的探索（二）

使用v-for循环的目的就是为了处理大量类型重复的数据，归根结底是一种有规律的数据，但是有些规律却不是那么容易的，很多时候，我们会使用到循环，甚至多重循环的嵌套，不同的循环嵌套对应着不同的json数据的结构，本篇主要讲述的是使用v-for循环解决部分同，部分不同的情况，主要是针对表格table来使用的。

模拟的json数据如下：

{
	"name":"小王",
	"age":20,
	"phone":"12345678",
	"sex":"女",
	"grades":[
	  {
	  	"term":"2017年第一学期",
	  	"project":{
	  		 "chinese":100,
	  	    "math":98,	  	
	  	    "english":100,
	  	    "computer":95,
	  	    "physic":88,	  	
	  	    "electricty":89
	  	 }
	  },
	  {
	  	"term":"2017年第二学期",
	  	"project":{
	  		"chinese":90,
	  	    "math":90,	  	
	  	    "english":100,
	  	    "computer":98,
	  	    "physic":80,	  	
	  	    "electricty":89
	  	 }  	    
	  }
	]
}

要求：以表格的形式展示这个成绩表！

思路：分析结构，可以发现，为小王一个人的成绩，分别是不同学期的成绩，里面相同的部分是科目，不同的部分是学期

，如果单独的各写各的，则需要很多循环，怎样通过尽可能少的循环就解决了问题，方法如下：

html结构：

 <p><span>{{name}}</span>成绩表</p>
		   	<label>name:</label><span>{{name}}</span>
		    <label>age:</label><span>{{age}}</span>
		    <label>phone:</label><span>{{phone}}</span>
		    <label>sex:</label><span>{{sex}}</span>
		    <table class="tablegrade">
		    	<tr>
		    		<td>学期</td>
		    		<td>语文</td>
		    		<td>数学</td>
		    		<td>英语</td>
		    		<td>计算机</td>
		    		<td>物理</td>
		    		<td>电路</td>
		    	</tr>
		    	<tr v-for="(i,index) in grades">
		    		<td>{{i.term}}</td>
		    		<td v-for="value in i.project">
		    			{{value}}
		    		</td>		    		
		    	</tr>
		    </table>

这里我们可以清晰的发现：着用了两层循环就实现的表格数据的显示。

效果图如下：

数据绑定的内容如下：

首先引入需要用的json数据的位置；

然后再create的时候就获取这些值；

再通过循环嵌套实现数据的显示，其实这是一个很简单的解决方案，聪明的你只要明白for循环的实现原理，就能想出比较好的点子。

import data from '../../common/data.json';  //1、引入要使用的json数据
	export default{
		name: 'Order',
		data(){
			return{
				name:"",
				age:0,
				phone:"",
				sex:"",
				grades:[],   //2、定义一个可以存放数据的数组
				avg:0
			}
		},		
		created() {         //3、json数据内容的获取
			this.name = data.name;
			this.age = data.age;
			this.phone = data.phone;
			this.sex = data.sex;
	    	this.grades = data.grades;		//4、json数据与数据相互传递保存	
		},

归纳总结一下for循环的使用方法：

1、通过循环展示所有值，直接使用for循环【全部显示】

2、通过循环满足条件展示，不满足不展示，使用for循环+if（满足要显示的条件）【部分显示】

3、通过循环满足时显示一种内容，不满足时显示另一种内容，使用for循环+if（满足显示条件）+else（不满足时显示）【归类显示】

源码查看位置：https://download.csdn.net/download/colourfultiger/10585045