【Vue.js基础教程】第7章：Vue列表渲染方法 v-for

Vue.js基础教程 第7章：Vue列表渲染方法v-for

欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中

在这章中，我们将深入了解如何使用 Vue.js 中的 v-for 指令来渲染列表数据。

列表渲染

用 v-for 把一个数组对应为一组元素

v-for 是 Vue.js 提供的指令，用于基于数组数据渲染一个列表。它的语法非常简单，格式为 item in items，其中 items 是要渲染的数组，item 是当前遍历元素的别名。

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

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

结果显示：

• Foo
• Bar

在 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' }
    ]
  }
})

结果：

• Parent - 0 - Foo
• Parent - 1 - Bar

你还可以使用 of 替代 in 来作为分隔符：

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

在 v-for 里使用对象

除了数组，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: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：

• How to do lists in Vue
• Jane Doe
• 2016-04-10

你还可以获取属性名（键名）和索引：

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

结果：

title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10

若要获取索引，可以再加一个参数：

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

结果：

0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10

维护状态

当 Vue 更新 v-for 渲染的列表时，它默认使用“就地更新”的策略。如果数据项的顺序发生变化，Vue 会就地更新每个元素，而不是移动 DOM 元素来匹配数据的顺序。为了更高效地渲染，建议在使用 v-for 时为每个项提供一个唯一的 key 值：

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

尽量为 v-for 提供 key，除非遍历的内容非常简单，或者你刻意想依赖默认的更新策略。

数组更新检测

Vue 会自动侦测数组的变化，并触发视图更新。它包裹了数组的变更方法，如 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse()。

例如：

example1.items.push({ message: 'Baz' })

替换数组

与变更数组的方法不同，像 filter()、concat() 和 slice() 这些非变更方法会返回一个新数组，因此可以用新数组替换原数组。Vue 会智能地处理数组的替换，确保高效的 DOM 更新。

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

Vue 会智能地判断哪些元素需要更新，从而减少不必要的 DOM 渲染。

显示过滤/排序后的结果

有时你需要显示一个数组过滤或排序后的版本，但不想更改原始数据。这时，你可以通过计算属性来处理这个需求：

<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 里使用范围值

v-for 还可以用来遍历整数，这时它会重复渲染指定次数：

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

结果：1 2 3 4 5 6 7 8 9 10

在 <template> 上使用 v-for

与 v-if 一样，你可以在 <template> 上使用 v-for，它可以循环渲染多个元素：

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

v-for 与 v-if 一同使用

不推荐在同一元素上同时使用 v-if 和 v-for。如果需要有条件地跳过渲染，可以将 v-if 放在外层元素上：

<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>

但是组件的作用域与 v-for 不同，数据不会自动传递到组件里。你需要显式地使用 prop 将数据传递给组件：

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

在组件中，数据传递和 v-for 的配合更加灵活，有助于提升组件的复用性。

---

这样，你就掌握了 v-for 的使用方法及其各种技巧，接下来可以通过实际项目来巩固这些知识点。