vue v-for html,Vue 2.0学习笔记：v-for

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

v-for 的作用

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

{{ alias }}

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

{{ item }}

{{ item }} {{ index }}

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

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

{{ item.text }}

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

一个数组的 v-for

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

• {{ item }}

// JavaScript

var app = new Vue({

el: '#app',

data: {

items: [1, 34, 89, 92, 45, 76, 33]

}

})

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

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

• index-{{ index }}: {{ item }}

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

从上面的示列看出来了，你需要哪个元素(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: {