上一节，我们学习了在Vue中如何通过v-if和v-show根据条件渲染所需要的DOM元素或者模板。在实际的项目中，我们很多时候会碰到将JSON数据中的数组或对象渲染出列表之类的元素。在Vue中，提供了一个v-for的指令，可以渲染列表。

v-for 的作用

v-for可以基于源数据多次渲染元素或模板块。这个指令必须用特定的语法alias in expression，为当前遍历的元素提供别名：

<div v-for="alias in expression"> {{ alias }}</div>

一般都是给数组或对象指定别名，除此之外还可以为索引值指定别名，对于对象还可以给value指定别名，常见的几种情形如下：

<div v-for="item in items">{{ item }}</div>
<div v-for="(item, index) in items">{{ item }} {{ index }}</div>
<div v-for="val in object"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

其中我们也可以把in换成of作为分隔符，因为它是最接近JavaScript迭代器的语法。

v-for的默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个key的特殊属性：

<div v-for="itme in items" :key="item.id"> {{ item.text }}</div>

接下来，我们看看v-for的一些使用场景。

一个数组的 v-for

使用v-for指令把数组的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法，items是源数据数组，item是数组元素迭代的别名。来看一个简单的示例：

<!-- Template -->
<ul>
    <li v-for="item in items">{{ item }}</li>
</ul>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        items: [1, 34, 89, 92, 45, 76, 33]
    }
})

这个时候，数组items的每个item渲染到对应的li中，在浏览器看到的效果如下：

上面的例子是通过v-for把数组items的每个项迭代出来放到li中，除此之外，还可以把数组的每个index也遍历出来。在上面的代码的基础上，咱们修改一下模板：

<ul>
    <li v-for="(item, index) in items">index-{{ index }}: {{ item }}</li>
</ul>

这个时候数组的索引号也遍历出来了：

从上面的示列看出来了，你需要哪个元素（HTML的标签）循环，那么v-for就写在那个元素上。

上面我们已经可以正常的使用v-for将定义的数组每一项输出来。为了加深学习，咱们在上面的示例基础上增加一项需求，就是对输出的数组进行排序。这个时候，咱们需要使用到Vue中的computed属性。那么computed属性是做什么的，我也不清楚，咱们一起先不去了解他吧，记作Vue有这么一个属性。随着后面的学习，我们会明白computed的用处的。

在Vue中，我们不能污染源数据，如果我们直接对源数据items通过sort()方法进行排序，将会报错的：

var app = new Vue({
    el: '#app',
    computed: {
        items: function() {
            return this.items.sort()
        }
    },
    data: {