16 条件渲染与列表渲染之v-for遍历数组

在 Vue 的开发中，列表渲染是一个重要的功能，它可以将数组中的每一项渲染为一个 DOM 元素。在本章中，我们将专注于 v-for 指令的使用，以及如何在模板中遍历数组。

使用 v-for 渲染列表

v-for 是 Vue 中用于循环渲染列表的指令，它的语法如下：

v-for="(item, index) in items"

• item 是当前项的别名，可以是任何有效的变量名。
• index 是当前项的索引（可选）。
• items 是要遍历的数组。

简单示例

我们来看一个简单的示例，假设我们有一个包含水果名称的数组，我们想要将这些名称显示为一个列表。

<template>
  <div>
    <h1>水果列表</h1>
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">{{ fruit }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['苹果', '香蕉', '橘子']
    };
  }
};
</script>

在这个例子中：

• 我们定义了一个 fruits 数组，包含三个水果名称。
• 使用 v-for 指令遍历 fruits 数组，并通过 {{ fruit }} 将每个水果渲染为列表项 (<li>)。
• 使用 :key 属性为每个列表项提供一个唯一的标识，以便 Vue 更有效地管理和更新列表。

渲染对象数组

对于包含对象的数组，v-for 仍然适用。假设我们有一个包含多个对象的数组，每个对象代表一个学生。

<template>
  <div>
    <h1>学生列表</h1>
    <ul>
      <li v-for="(student, index) in students" :key="student.id">
        {{ student.name }} - {{ student.age }}岁
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 },
        { id: 3, name: '王五', age: 23 }
      ]
    };
  }
};
</script>

在这个例子中，students 数组包含多个学生对象，每个对象都有 id、name 和 age 属性。我们利用 v-for 渲染这些学生的信息，并使用 student.id 作为 :key。

v-for 和 v-if 的结合使用

在实践中，我们可能需要结合使用 v-for 和 v-if 来条件性地渲染列表项。例如，假设我们只想显示年龄大于 21 岁的学生：

<template>
  <div>
    <h1>成年人学生列表</h1>
    <ul>
      <li v-for="(student, index) in students" :key="student.id" v-if="student.age > 21">
        {{ student.name }} - {{ student.age }}岁
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 },
        { id: 3, name: '王五', age: 23 }
      ]
    };
  }
};
</script>

在上面的代码中，我们使用 v-if 属性来过滤那些年龄小于或等于 21 岁的学生。需要注意的是，使用 v-if 会影响性能，因为每次渲染时，Vue 需要评估该条件。

小结

通过以上的例子，我们了解到如何使用 v-for 指令遍历数组并渲染元素。在处理对象数组时，v-for 同样适用，并且需要确保 key 的唯一性。我们也探讨了如何结合使用 v-for 和 v-if 实现条件渲染。

在下一个章节中，我们将进一步探讨如何使用 key 来优化渲染，并提高应用性能。