使用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（不滿足時顯示）【歸類顯示】