Vue#列表渲染

v-for 可以基于一个数组渲染一个列表。 形式为  item in items ,其中item为自定义元素别名，items为数组元素。在v-for块内有一个当前数组元素索引 $index。

https://jsfiddle.net/miloer/e7sf5gfL/

从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：

<div v-for="item of items"></div>

template里也可以使用v-for:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

Vue也封装了几组方法：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

https://jsfiddle.net/miloer/e7sf5gfL/1/

 

v-for也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量$key。我觉得这个真心好用啊哈哈。

https://jsfiddle.net/miloer/e7sf5gfL/2/

官方的一个小注意：

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

v-for 也可以接收一个整数，此时它将重复模板数次。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
//0-9

最后还有一个数组过滤：

https://jsfiddle.net/miloer/e7sf5gfL/4/