vue3中v-for指令的详解

最新推荐文章于 2025-07-19 13:55:07 发布

冲！！

最新推荐文章于 2025-07-19 13:55:07 发布

阅读量902

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_52006958/article/details/145757156

1.v-for的作用

Vue 3提供了 v-for 指令，它是一个强大的内置指令，用于基于源数据数组或对象渲染列表。

2.使用v-for指令遍历数组

v-for 指令可以用来遍历数组，并且在每次迭代中提供当前项的值和索引。我们可使用以下示例渲染一个列表：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ index }} - {{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: '项目1' }, { name: '项目2' }, { name: '项目3' }]
    };
  }
};
</script>

在这个例子中，v-for 指令遍历items数组，item代表当前迭代的项目对象，index是当前项目的索引。
:key是一个必要的属性，一般我们对每个key绑定一个唯一值(一般是id属性)，它能帮助Vue跟踪每个列表项的唯一性，这对于高效的DOM更新非常重要。

3.遍历对象数组(数组元素为对象)

遍历对象数组与遍历普通数组类似，但是我们可以访问数组中对象的属性。例如，如果数组包含对象，每个对象都有name和id属性，就可以这样遍历它们：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ]
    };
  }
};
</script>

在这个例子中，:key绑定到了每个项目的id属性，这是因为id通常是唯一的。

4.遍历对象的属性

我们还可以使用v-for来遍历一个对象的属性。这在我们需要显示一个对象的所有键值对时非常有用。例如：

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

<script>
export default {
  data() {
    return {
      object: {
        name: '搞懂vue3',
        date: '2025.02.20',
        slogan: '学明白学透彻！'
      }
    };
  }
};
</script>

在这个例子中，v-for遍历object对象，key是指对象的键(键名)，value是对应的值(键值)，index是当前迭代的索引。

5.在组件上使用v-for

我们还可以在组件上使用v-for，和在一般的元素上使用没有区别 (别忘记提供一个key)，但是我们需要通过props传递数据，即传递props将迭代后的数据传递到组件中，因为组件有自己独立的作用域。例如：

<!-- 假设MyComponent是我们导入要使用v-for指令的那个组件 -->
 
 <!-- 这不会自动将任何数据传递给组件 -->
<MyComponent v-for="item in items" :key="item.id" />


 <!-- 我们使用props的方式将数据传递给组件 -->
<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>