Vue学习笔记（七） - 列表渲染

发表于

一般形式

使用 v-for 来遍历一个数组或者对象以渲染一个列表。
形式： item in items
解释： item - 元素的别名 items - 数组/对象
其中，Vuejs 还给我们提供了一个特殊变量 $index，为当前数组元素的索引

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

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

也可以为索引指定一个别名：

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

Addition: 1.0.17 开始可以使用 v-for=”item of items”

模版 template v-for

结合 template 标签作为包裹块，可以实现渲染一个包含多个元素的模版：

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

数组变动检测

变异方法

所谓“变异方法”（名称来自 Vue.js 的中文 API），就是调用一些属性方法后，原始的数组会产生变化。
Vue.js 对被观察数组的这些变异方法进行了加工，使用这些方法时可以触发视图的更新，包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
    ( sort 在 Chrome 不会触发更新，火狐可以）

替换数组

使用新数组替换旧数组时，也可以触发视图的更新。
Vue.js 内部实现了一些启发算法，最大化地复用 DOM 元素，因此不必担心替换数组会因为重新渲染 DOM 而带来的性能问题。
（列表性能优化原理，http://gold.xitu.io/entry/5776187cd342d30058d50fd2）

因此，在使用一些不会修改原始数组的方法时，可以直接用获得的新数组来替换旧数组。

track by

绑定一个作为唯一 ID 的属性，从而可以使 Vue.js 尽可能地复用已有实例。

track by $index

问题

“因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：”(WHY?- -)

  1. 直接用索引设置元素， 如： vm.items[0] = {};
  2. 修改数据的长度， 如： vm.items.length = 0;

To solve Q1，可以使用 Vue.js 数组的 $set() 方法：
example.items.$set( key, data )
key - 键值或者索引
data - 要赋予其的数据

To solve Q2，只需要直接用一个空数组来替换 items

对象 v-for

遍历对象时，除了可以访问到 $index，也可以访问到 $key

值域 v-for

v-for 接收一个正整数，可以输出范围内的所有整数

过滤/排序

方法：
创建一个计算属性，返回过滤/排序过的数组
使用内置的过滤器 filterBy 和 orderBy