Vue中的v-for指令是用来做什么的？

最新推荐文章于 2025-04-12 19:31:36 发布

祈澈菇凉

最新推荐文章于 2025-04-12 19:31:36 发布

阅读量374

点赞数

分类专栏：前端面试题合集 Vue面试题合集文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36538012/article/details/133952266

版权

前端面试题合集同时被 2 个专栏收录

480 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

Vue面试题合集

131 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

Vue中的v-for是一个用于渲染列表或集合的指令，适用于数组、对象和数字范围的迭代。它通过迭代数据源，生成对应的DOM节点或组件实例。基本语法如v-for='item in items'，其中item是当前迭代的元素，index是索引，key是对象迭代时的键，of用于嵌套迭代时引用父级对象。v-for还支持修饰符、范围和排序等高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

在Vue中，v-for是一个用于渲染列表或集合的指令。它通过迭代数据源中的每个元素，生成对应的DOM节点或组件实例，并将它们渲染到页面上。

v-for指令的基本语法如下：

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

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

这里使用v-for指令来迭代items数组中的每个元素，并将每个元素的name属性渲染到<li>

了解本专栏