vue如何实现循环

Vue 中实现循环的方法

在 Vue 中，循环主要通过 v-for 指令实现，可以遍历数组、对象或数字范围。以下是具体用法和示例：

遍历数组

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

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Apple' },
        { name: 'Banana' },
        { name: 'Cherry' }
      ]
    }
  }
}
</script>

遍历对象

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

<script>
export default {
  data() {
    return {
      object: {
        title: 'Vue Guide',
        author: 'Vue Team',
        published: '2021'
      }
    }
  }
}
</script>

遍历数字范围

<template>
  <ul>
    <li v-for="n in 5" :key="n">
      {{ n }}
    </li>
  </ul>
</template>

注意事项

• 始终为 v-for 添加 :key 属性，帮助 Vue 高效更新 DOM。
• 避免在同一元素上同时使用 v-for 和 v-if，优先使用计算属性过滤数据。
• 在组件中使用 v-for 时，需通过 props 传递数据。

性能优化

对于大型列表，可使用 v-for 配合 v-memo 或虚拟滚动技术提升性能。