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
最后还有一个数组过滤: