8. List Rendering（列表呈现）

列表渲染

用数组将元素映射到元素 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内部，我们可以完全访问父范围属性。v-for第二个参数可以获取到当前项目的索引

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

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

结果：

您也可以使用of分隔符代替in，以便它更接近JavaScript的迭代器语法：

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

v-for 与一个对象

您也可以使用v-for迭代对象的属性。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue{
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

结果：此处输出的结果是什么？

您也可以为该键提供第二个参数：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

另一个参数：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

在迭代对象时，顺序基于键枚举顺序Object.keys()，并不保证在JavaScript引擎实现中保持一致。

key

当Vue更新呈现的元素列表时v-for，默认情况下它使用“就地补丁”策略。如果数据项的顺序发生了变化，Vue将不会移动DOM元素来匹配项目的顺序，而是会将每个元素就地修补并确保它反映应该在该特定索引处呈现的内容。这与track-by="$index"Vue 1.x中的行为类似。

这个默认模式是有效的，但只适用于你的列表渲染输出不依赖子组件状态或临时DOM状态（例如表单输入值）的情况。

为了给Vue一个提示，以便它可以跟踪每个节点的身份，并因此重新使用和重新排序现有元素，您需要key为每个项目提供一个唯一的属性。一个理想的价值key将是每个项目的唯一ID。这个特殊的属性大致相当于track-by1.x，但它的作用类似于一个属性，所以你需要使用v-bind它来将它绑定到动态值（在这里使用简写）：

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

建议尽可能提供一个带v-for的key，除非迭代的DOM内容很简单，或者您故意依靠默认行为来提高性能。

由于它是Vue识别节点的通用机制，因此我们将在后面的指南中看到，关键还有其他用途，并不特别与v-for绑定。

数组变化检测

变化方法

Vue包装观察数组的变异方法，以便它们也会触发视图更新。包装的方法是：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

您可以打开控制台并通过调用它们的方法来使用前面的示例items数组。例如：example1.items.push{ message: 'Baz' })。

替换数组

顾名思义，变异方法会改变它们被调用的原始数组。相比之下，也有非诱变方法，例如filter()，concat()与slice()，不发生变异原数组，但总是返回一个新的数组。使用非变异方法时，可以用新变量替换旧数组：

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

你可能会认为这会导致Vue扔掉现有的DOM并重新渲染整个列表 - 幸运的是，情况并非如此。Vue实现了一些智能启发式方法来最大化DOM元素的重用，因此用另一个包含重叠对象的数组替换数组是非常有效的操作。

注意事项

由于JavaScript的限制，Vue 无法检测到对数组的以下更改：

1. 当你用索引直接设置一个项目，例如 vm.items[indexOfItem] = newValue

2. 当你修改数组的长度时，例如 vm.items.length = newLength

为了克服注意事项1，以下两项将完成相同的功能vm.items[indexOfItem] = newValue，但也会触发反应性系统中的状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

要处理警告2，您可以使用splice：

example1.items.splice(newLength)

对象更改检测警告

再次由于现代JavaScript的限制，Vue无法检测属性添加或删除。例如：

var vm = new Vue{
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive

Vue不允许向已创建的实例动态添加新的根级别反应属性。但是，可以使用该Vue.set(object, key, value)方法为嵌套对象添加反应性属性。例如，给出：

var vm = new Vue{
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

您可以使用以下方法将新age属性添加到嵌套userProfile对象：

Vue.set(vm.userProfile, 'age', 27)

您也可以使用vm.$set实例方法，它是全局Vue.set的别名：

this.$set(this.userProfile, 'age', 27)

有时您可能想要为现有对象分配多个新属性，例如使用Object.assign()或 _.extend()。在这种情况下，您应该使用两个对象的属性创建一个新对象。所以，而不是：

Object.assign(this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

您将添加新的反应性属性：

this.userProfile = Object.assign{}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

显示过滤/排序结果

有时我们想要显示一个数组的过滤或排序版本，而不需要实际改变或重置原始数据。在这种情况下，您可以创建一个返回过滤或排序数组的计算属性。

例如：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不可行的情况下（例如嵌套v-for循环内部），可以使用以下方法：

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

带有范围的v-for

v-for也可以取整数。在这种情况下，它会多次重复该模板。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

结果：

在<template>中的v-for

与模板类似v-if，您也可以使用v-for的<template>标签来渲染多个元素的块。例如：

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

带有v-if的v-for

当它们存在于同一个节点上时，v-for其优先级高于v-if。这意味着v-if将分别在循环的每次迭代中运行。当您想要渲染仅用于某些项目的节点时，这非常有用，如下所示：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

以上只会呈现不完整的待办事项。

相反，如果您的意图是有条件地跳过循环的执行，则可以将v-if放在包装器元素（或<template>）上。例如：

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

带有一个组件的v-for

本节假定组件的知识。可以跳过。

您可以直接v-for在自定义组件上使用，就像任何普通的元素一样：

<my-component v-for="item in items" :key="item.id"></my-component>

In 2.2.0+, when using v-for with a component, a key is now required.

但是，这不会自动将任何数据传递给组件，因为组件具有独立的范围。为了将迭代的数据传递给组件，我们还应该使用props(组件参数)：

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

不自动注入item到组件的原因是因为这会使组件与v-for紧密耦合在一起。明确其数据来自何处会使组件在其他情况下可重用。

以下是一个简单的待办事项列表的完整示例：

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

注意is="todo-item"属性。这在DOM模板中是必需的，因为只有一个<li>元素在<ul>中有效。它的功能与<todo-item>相同，但可以解决潜在的浏览器解析错误。请参阅DOM模板解析警告以了解更多信息。

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})

new Vue{
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push{
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})