2.8 循环

遍历是指所有元素都访问一次，而且仅访问一次。
元素的个数未知的时候，需要用循环来完成。
一. 遍历集合
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名，是临时的，表示当前迭代到的元素。
打开Home.vue，把下面的代码复制到template部分：
<ul v-for="c in chapters" :key="c">
    <li>{{'第'+c.seiral+'章'+c.name}}</li>
</ul>
这里c是临时变量，每次从chapters里面取一个元素，而chapters一定是一个集合。key值就用临时变量c。chapters的定义如下：
data() {
    return {
      username: "中二之魂",
      message: "正在加载中",
      html: '<a href="https://www.codessp.cn">学习平台</a>',
      textValue: '一个值',
      chapters: [{ seiral: '一', name: "Java基本语法" }, { seiral: '二', name: "变量和表达式" }, 
                 { seiral: '三', name: "选择结构" }, { seiral: '四', name: "循环结构" }, 
                 { seiral: '五', name: "函数" }, { seiral: '六', name: "面向对象设计基础" }]
    };
  },
template遍历的时候，还可以加上下标，下标是一个数字，有需要可以用到：
<ul v-for="(c,i) in chapters" :key="c">
    <li>[{{i}}]{{'第'+c.seiral+'章'+c.name}}</li>
</ul>
(c,i)的顺序不能乱，第二个参数i会被认定为下标，是一个从0开始的整数，下面是效果图：
循环支持用template，也就是template包含部分会循环，template本身是不会出现在最终的html里。下面的代码和上面是等价的。
<ul>
    <template v-for="(c,i) in chapters" :key="c">
        <li>[{{i}}]{{'第'+c.seiral+'章'+c.name}}</li>
    </template>
</ul>

在 v-for 块中，我们可以访问所有父作用域的属性。如下所示，v-for内部也能访问别的变量，例如这里的parentMessage。
v-for 还支持一个可选的第二个参数，即当前项的下标（从0开始）
<ul id="example-2">
    <li v-for="(item, index) in items">{{parentMessage}}-{{index}-{{item.message}}</li>
</ul>

二. 遍历对象
你也可以用 v-for 来遍历一个对象的所有属性。例如下面的例子，object里面有三个属性title、author、publishedAt，用v-for可以把某个对象的所有属性都遍历一次。
<ul id="v-for-object" class="demo">
    <li v-for="value in object">{{value}}</li>
</ul>
data(){
    return{
        title:'How to do lists in Vue',
        author:'Jane Doe',
        publishedAt:'2016-04-10'
    }
}
结果如下：
你也可以提供第二个的参数为 property 名称 (也就是键名)：
<ul id="v-for-object" class="demo">
    <li v-for="(value, name) in object">{{name}}:{{value}}</li>
</ul>
js部分：
data(){
    return{
        title:'How to do lists in Vue',
        author:'Jane Doe',
        publishedAt:'2016-04-10'
    }
}

结果如下：
还可以用第三个参数作为索引：
<ul id="v-for-object" class="demo">
    <li v-for="(index,value, name) in object">{{index}}.{{name}}:{{value}}</li>
</ul>
js部分：
data(){
    return{
        title:'How to do lists in Vue',
        author:'Jane Doe',
        publishedAt:'2016-04-10'
    }
}
结果如下：