使用track-by(vue中track-by属性)
在某些情况下,你可能需要以全新的对象(比如 API 调用所返回的对象)去替换数组。如果你的每一个数据对象都有一个唯一的 id 属性,那么你可以使用 track-by 特性参数给 Vue.js 一个提示,这样它就可以复用已有的具有相同 id 的 Vue 实例和 DOM 节点。
例如:你的数据是这个样子的
{ items: [ { _uid: '88f869d', ... }, { _uid: '7496c10', ... } ] }
那么你可以像这样给出提示:
<div v-repeat="items" track-by="_uid"> <!-- content --> </div>
在替换 items 数组时,Vue.js 如果碰到一个有 _uid: '88f869d' 的新对象,它就会知道可以直接复用有同样 _uid 的已有实例。在使用全新数据重新渲染大型 v-repeat 列表时,合理使用 track-by 能极大地提升性能。
遍历对象
你也可以使用 v-repeat 遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性 $key。对于简单值,你也可以象访问数组中的简单值那样使用 $value 属性。
<ul> <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li> <li>===</li> <li v-repeat="objectValues">{{$key}} : {{msg}}</li> </ul>
new Vue({ el: '#repeat-object', data: { primitiveValues: { FirstName: 'John', LastName: 'Doe', Age: 30 }, objectValues: { one: { msg: 'Hello' }, two: { msg: 'Bye' } } } });
在 ECMAScript 5 中,对于给对象添加一个新属性,或是从对象中删除一个属性时,没有机制可以检测到这两种情况。针对这个问题,Vue.js 中的被观察对象会被添加三个扩展方法: $add(key, value), $set(key, value) 和 $delete(key)。这些方法可以被用于在添加 / 删除观察对象的属性时触发对应的视图更新。方法 $add 和 $set 的不同之处在于当指定的键已经在对象中存在时 $add 将提前返回,所以调用 obj.$add(key) 并不会以 undefined 覆盖已有的值。
迭代值域
v-repeat 也可以接受一个整数。在这种情况下,它将重复显示一个模板多次。下面的例子将迭代3次。
<div> <div v-repeat="val">Hi! {{$index}}</div> </div>
new Vue({ el: '#range', data: { val: 3 } });
数组过滤器
有时候我们只需要显示一个数组的过滤或排序过的版本,而不需要实际改变或重置原始数据。Vue 提供了两个内置的过滤器来简化此类需求: filterBy 和 orderBy。
<input v-model="searchText"> <ul> <li v-repeat="users | filterBy searchText">{{name}}</li> </ul>