前言
当我们有一个基于数组的列表数据，想让他在模板中进行渲染时，vue提供了一个v-for指令，来让我们进行遍历操作，你可以把他理解为JavaScript中的for循环。指令的值 为item in items的形式，其中items是数据源，而item则是迭代的对象。
当然我们也可以写成item of items的形式，着也更解决 迭代器的语法，这也是 vue 官方更推荐的。
<div v-for="item of items"></div> 复制代码
v-for 与 v-if
当然，有可能某些场景下，我们需要v-for和v-if一起连用。但这vue官方并不推荐，并且二者的优先级不同，v-if的优先级更高，也就意味着v-if指令内无法访问到v-for中定义的迭代项。
<template v-for="item in items"> <li v-if="!item"> {{ item }} </li> </template> 复制代码
这个时候我们就可以通过template标签上v-for来解决这个问题。
v-for中的key
当我们通过v-for指令迭代数据的时候，我们可以给每个标签上添加一个key属性。这么做的好处是，当数据源发生更新的时候，vue可以通过key更好的跟踪每个节点，从而更好的重排页面的元素，当然，key值必须是唯一的。
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> 复制代码
数组的方法
当你定义了一个响应式的数组的时候，你可能会对数组进行相应的操作，而对于一些数组的方法，vue做了监听处理。
当如下方法被调用时，会对调用它们的原数组进行变更：
push()pop()shift()unshift()splice()sort()reverse()
而相应的，也有一些不会变更原数组内容的方法，他们会返回一个新的数组。例如：filter()，concat() 和 slice()，这些方法在某些场景下尤为好用。
