代码干货 | vue.js列表渲染

本文来源于阿里云-云栖社区，原文点击这里。

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名

基本用法

<ul id="example-1">    <li v-for="item in items">{{ item.message }}</li></ul><script>var example1 = new Vue({    el: '#example-1',    data: {        items: [            {message: 'Foo' },            {message: 'Bar' }        ]    }})</script>

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引

<ul id="example-2">    <li v-for="(item, index) in items">        {{ parentMessage }} - {{ index }} - {{ item.message }}    </li></ul><script>var example2 = new Vue({    el: '#example-2',    data: {        parentMessage: 'Parent',        items: [            { message: 'Foo' },            { message: 'Bar' }        ]    }})</script>

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

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

Template v-for

如同 v-if 模板，你也可以用带有 v-for 的 标签来渲染多个元素块。

>>>展开全文