我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
基本用法
HTML:
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
JS:
var example1 = new Vue({ el: '#example-1', data: { items: [ {message: 'foo' }, {message: 'Bar' } ] } })
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。
HTML:
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
JS:
var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
结果：
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
