vue能够实现循环指令

Vue 中的循环指令实现

Vue.js 提供了 v-for 指令来实现循环渲染，支持遍历数组、对象或数字范围。以下是具体用法和示例：

遍历数组

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

• items 是数据源数组
• item 是当前迭代的数组元素
• index 是可选参数，表示当前索引
• :key 是必需的，用于高效更新 DOM

遍历对象

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

• value 是属性值
• key 是属性名
• index 是可选参数，表示当前索引

遍历数字范围

<span v-for="n in 10">{{ n }}</span>

• 这会渲染数字 1 到 10

使用 key 的重要性

为每个循环项添加唯一 key 能帮助 Vue 识别节点，提高性能：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

与 v-if 一起使用

不推荐在同一元素上同时使用 v-for 和 v-if，应改为在父元素上使用 v-if：

<template v-if="shouldRender">
  <div v-for="item in items" :key="item.id">
    {{ item.text }}
  </div>
</template>

性能优化技巧

对于大型列表，可使用 v-once 或虚拟滚动技术：

<div v-for="item in bigList" :key="item.id" v-once>
  {{ item.content }}
</div>