Vue.js中列表如何渲染

 
 {{ item.message }}
 

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

 
 {{ parentMessage }} - {{ $index }} - {{ item.message }}
 

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

 {{ index }} {{ item.message }}

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

{
 items: [
 { _uid: '88f869d', ... },
 { _uid: '7496c10', ... }
 ]
}

然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。

track-by $index

如果没有唯一的键供追踪，可以使用 track-by="$index" ，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。

这让数据替换非常高效，但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变，不能同步临时状态（比如 元素的值）以及组件的私有状态。因此，如果 v-for 块包含 元素或子组件，要小心使用 track-by="$index"

问题

因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：

      1.直接用索引设置元素，如 vm.items[0] = {}；

      2.修改数据的长度，如 vm.items.length = 0 。

为了解决问题 (1)，Vue.js 扩展了观察数组，为它添加了一个 $set() 方法：

// 与 `example1.items[0] = ...` 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})

至于问题 (2)，只需用一个空数组替换 items。

除了 $set() ， Vue.js 也为观察数组添加了 $remove() 方法，用于从目标数组中查找并删除元素，在内部它调用 splice() 。因此，不必这样：

var index = this.items.indexOf(item)
if (index !== -1) {
 this.items.splice(index, 1)
}

只用这样：

this.items.$remove(item)

对象 v-for

也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量 $key。

 
 {{ $key }} : {{ value }}
 

new Vue({
 el: '#repeat-object',
 data: {
 object: {
  FirstName: 'John',
  LastName: 'Doe',
  Age: 30
 }
 }
})

也可以给对象的键提供一个别名：

 {{ key }} {{ val }}

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

值域 v-for

v-for 也可以接收一个整数，此时它将重复模板数次。

 {{ n }} 

显示过滤/排序的结果

有时我们想显示过滤/排序过的数组，同时不实际修改或重置原始数据。有两个办法：

     1.创建一个计算属性，返回过滤/排序过的数组；

     2.使用内置的过滤器 filterBy 和 orderBy。

计算属性有更好的控制力，也更灵活，因为它是全功能 JavaScript。但是通常过滤器更方便，详细见 API。

感谢各位的阅读！关于“Vue.js中列表如何渲染”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！