vue v-for嵌套循环

@[TOC]v-for的嵌套循环

v-for 列表循环例子

v-for解释

用v-for指令根据一组数组的选项列表进行渲染，v-for指令需要使用item in items，item是对象别名，items是源数据数组（名）。比如item为student,那么我们提取的JSON数据可能包括student的多个属性。如名字,学号，性别等等。

v-for例子

官网例子：
body部分

   <ul id="example-1">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
**vue部分**
    var VM = new Vue({
        el: '#example-1',
            data: {
                items: [
                { message: 'Foo' },
                { message: 'Bar' }
                ]
            }
    })
        
    **结果**：
        ·FOO
        ·BAR

v-for 通过一个对象属性来迭代

解释：
通过对象来迭代就是输出某个对象的所有值。比如输出学生对象的成绩属性，
而成绩包括了语文，英语等多门课程。如一下Json:
例子

student_JSON:[
{
name:‘李四’,
sex:‘男’,
grade:{
语文：100,
数学:30
}
}
]

v-for 嵌套循环

为了输出数据的所有内容，我们需要用两个V-for来进行循环。
直接用上面的JSON.
.
body部分

<div id="app">
   <div v-for="student in student_JSON">
       <P>{{student.name}}</P>
       <P>{{student.sex}}</P>
        <ul>
           <li v-for="value in student.grade">{{value}}</li>
        </ul>
    </div>
 <div>

**结果**：
    李四
    男
        100
        30

v-for 注意

…
1. 注意v-for放的位置。
2.千万要注意最外层v-for的范围要包括迭代循环。
3.写之前一定要注意JSON属性。没有JSON也可以自己随便创建一个这样可以更有条理。- -！