Vue 中 v-for 指令循环输出数据的使用方法

在 Vue.js 开发中，v-for 指令是一个非常实用的工具，它允许我们基于一个数组或对象来循环渲染一组元素。下面将详细介绍其使用方法。

基于数组的循环

假设我们有一个包含多个元素的数组，比如一个存储学生名字的数组：students = ['Alice', 'Bob', 'Charlie']。在 Vue 模板中，使用 v-for 指令可以轻松地将这些名字循环输出。

<template>
  <div>
    <li v-for="student in students" :key="student">{{ student }}</li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: ['Alice', 'Bob', 'Charlie']
    };
  }
};
</script>

在上述代码中，v-for="student in students" 表示对 students 数组进行循环，student 是当前循环的每一项。:key="student" 是为每个循环项提供一个唯一的键值，这在 Vue 进行虚拟 DOM 渲染时非常重要，有助于提高渲染效率。

循环对象

v-for 指令也可以用于循环对象。例如，有一个包含学生信息的对象：studentInfo = { name: 'Alice', age: 20, grade: 'A' }。

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

<script>
export default {
  data() {
    return {
      studentInfo: { name: 'Alice', age: 20, grade: 'A' }
    };
  }
};
</script>

这里 v-for="(value, key) in studentInfo"，value 是对象的属性值，key 是属性名。同样，为每个循环项设置了唯一的 key。

循环时获取索引

在循环数组时，有时我们需要获取当前项的索引。可以这样做：

<template>
  <div>
    <li v-for="(student, index) in students" :key="index">{{ index + 1 }}. {{ student }}</li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: ['Alice', 'Bob', 'Charlie']
    };
  }
};
</script>

(student, index) 中 index 就是当前项的索引，从 0 开始。

Vue 的 v-for 指令为我们提供了便捷、灵活的方式来循环输出数据，无论是数组还是对象。合理使用 v-for 指令，结合 :key 和索引的获取，可以让我们高效地构建动态的页面内容，提升开发效率和用户体验。