vue怎么实现数组遍历

数组遍历的基本方法

在Vue中遍历数组可以使用v-for指令，这是Vue提供的用于渲染列表数据的核心指令。基本语法如下：

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

获取索引值

如果需要同时获取数组元素的索引值，可以在v-for中添加第二个参数：

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

遍历对象数组

当数组中的元素是对象时，可以直接访问对象的属性：

<div v-for="user in users" :key="user.id">
  <p>{{ user.name }} - {{ user.age }}</p>
</div>

使用计算属性过滤数组

有时需要先对数组进行过滤或处理再遍历，可以使用计算属性：

computed: {
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

然后在模板中使用：

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

遍历数字范围

v-for也可以用来遍历一个数字范围：

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

性能优化建议

为每个遍历的元素添加唯一的key属性，这有助于Vue高效地更新DOM。避免使用索引作为key，除非列表是静态的。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

在方法中遍历数组

除了模板中的v-for，也可以在Vue方法中使用JavaScript数组方法遍历：

methods: {
  processItems() {
    this.items.forEach(item => {
      console.log(item)
    })
  }
}