The purpose of using v-for loops is to process a large number of types of duplicate data. Ultimately, it is a regular data, but some rules are not so easy. Many times, we use loops, or even multiple loops nesting. Different loops nesting corresponds to different json data structures. This article mainly describes the use of v-for loops to solve the partSimilarly, in some different cases, it is mainly used for table tables.

The simulated json data is as follows:

{
	"name":"Xiaowang",
	"age":20,
	"phone":"12345678",
	"sex":"female",
	"grades":[
	  {
	  	"term":"2017 First semester of the year",
	  	"project":{
	  		 "chinese":100,
	  	    "math":98,	  	
	  	    "english":100,
	  	    "computer":95,
	  	    "physic":88,	  	
	  	    "electricty":89
	  	 }
	  },
	  {
	  	"term":"2017 Second semester of the year",
	  	"project":{
	  		"chinese":90,
	  	    "math":90,	  	
	  	    "english":100,
	  	    "computer":98,
	  	    "physic":80,	  	
	  	    "electricty":89
	  	 }  	    
	  }
	]
}

Requirements: Show this report in a form!

Thought: Analyzing the structure, we can find that the results for Xiao Wang are the results of different semesters, the same part is the subject, the different part is the semester

If you write them individually, you will need many loops. How to solve the problem with as few loops as possible?

html structure:

 <p><span>{{name}}</span>Achievement Sheet</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>Semester</td>
		    		<td>Chinese</td>
		    		<td>Mathematics</td>
		    		<td>English</td>
		    		<td>Computer</td>
		    		<td>Physics</td>
		    		<td>Circuit</td>
		    	</tr>
		    	<tr v-for="(i,index) in grades">
		    		<td>{{i.term}}</td>
		    		<td v-for="value in i.project">
		    			{{value}}
		    		</td>		    		
		    	</tr>
		    </table>

Here we can clearly see that the display of tabular data is achieved by using two layers of loops.

The results are as follows:

Data binding is as follows:

First, introduce the location of the json data you need.

Then get these values when you create it;

By nesting the data in a loop, this is actually a very simple solution. Smart people can come up with better ideas just by knowing how the for loop works.

import data from '../../common/data.json';  //1. Introduce the json data to be used
	export default{
		name: 'Order',
		data(){
			return{
				name:"",
				age:0,
				phone:"",
				sex:"",
				grades:[],   //2. Define an array that can hold data
				avg:0
			}
		},		
		created() {         //3. Acquisition of json data content
			this.name = data.name;
			this.age = data.age;
			this.phone = data.phone;
			this.sex = data.sex;
	    	this.grades = data.grades;		//4. json data and data transfer and preservation	
		},

To summarize how to use the for loop:

1. Display all values through a loop and use the for loop directly

2. Display by cyclic satisfying conditions, not satisfying not showing, use for cyclic + if (meeting the conditions to be displayed) [partial display]

3. Show one content when satisfied by loop, show another when not satisfied, use for loop + if (satisfy display condition) + else (show when not satisfied) [categorize display]

Source View Location: https://download.csdn.net/download/colourfultiger/10585045