当前位置：首页 > VUE

vue怎么实现数组遍历

2026-02-20 22:01:15VUE

在 Vue 中实现数组遍历的方法

Vue 提供了多种方式遍历数组，以下是常用的几种方法：

使用 v-for 指令

v-for 是 Vue 提供的指令，专门用于遍历数组或对象。语法如下：

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

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

使用计算属性

如果需要处理数组后再遍历，可以使用计算属性：

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

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.startsWith('A'))
    }
  }
}
</script>

使用 JavaScript 数组方法

在方法或生命周期钩子中，可以直接使用 JavaScript 的数组方法遍历：

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  },
  mounted() {
    this.items.forEach((item, index) => {
      console.log(index, item)
    })
  }
}
</script>

在模板中使用 v-for 和条件渲染

可以结合 v-if 实现条件渲染：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" v-if="item.startsWith('A')">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

遍历对象数组

对于对象数组，同样可以使用 v-for：

<template>
  <div>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

注意事项