Vue.js学习教程之列表渲染详解

本文主要给大家介绍了关于Vue.js列表渲染的相关资料，分享出来给大家参考学习，下面来看看详细的介绍：

v-for

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为item in items，items 是数据数组，item 是当前数组元素的别名：

示例：

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>

var example1 = new Vue({ el: '#example-1', data: { items: [  { message: 'Foo' },  { message: 'Bar' } ] }})

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

<ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>

var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [  { message: 'Foo' },  { message: 'Bar' } ] }})

另外，你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：

<div v-for="(index, item) in items"> {{ index }} {{ item.message }}</div>

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

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

template v-for

类似于 template v-if，也可以将 v-for 用在 <template> 标签上，以渲染一个包含多个元素的块。例如：

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

数组变动检测

变异方法

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。

被包装的方法有：

你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({ message: 'Baz' }) 。

替换数组

变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter() , concat() 和 slice() ，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：

example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/)})

可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。