Vue中遍历数据的三种常见方式这里在Vue中可以使用v-for指令来遍历数组或对象

作者：机器人技术佬 | 发布时间：2025-06-20 |

在Vue里，要遍历数组，最常用的就是v-for指令。这个指令可以让你轻松地在模板里创建对应的HTML元素。

比如，有一个数组fruits，你想要遍历它，可以这样写：

li v-for="(fruit, index) in fruits" :key="index">{{ fruit }}

这里，每个数组元素都会被遍历，并且生成一个列表项。

v-for不仅能遍历数组，还能遍历对象。你可以获取对象的键、值和索引。

比如，有一个对象person，你想遍历它的属性，可以这样写：

li v-for="(value, key, index) in person" :key="index">{{ key }}: {{ value }}

这样，对象的每个键值对都会被遍历。

有时候，直接用v-for可能不够用，这时候你可以在模板里用方法或计算属性来处理数据。

比如，你有一个方法来过滤数组：

methods: {

  filteredFruits() {

    return this.fruits.filter(fruit => fruit.includes('橙'));

  }

}

然后在模板里这样用：

li v-for="fruit in filteredFruits()" :key="fruit">{{ fruit }}

在遍历数据时，你可能会需要进行一些复杂的数据处理。这时候，结合JavaScript的原生方法会很有帮助。

比如，使用map方法来添加价格信息：

computed: {

  pricedFruits() {

    return this.fruits.map(fruit => ({ name: fruit, price: 10 }));

  }

}

或者使用filter方法来过滤数组中的特定元素：

computed: {

  noBananaFruits() {

    return this.fruits.filter(fruit => fruit !== '香蕉');

  }

}

在Vue中遍历数据主要有三种方式：使用v-for指令遍历数组或对象，使用方法或计算属性处理复杂逻辑，以及结合JavaScript原生方法进行数据处理。每种方法都有其适用场景和优势。

在Vue中，可以使用v-for指令来遍历数组或对象。v-for可以绑定到一个数组或对象上，然后根据数据的项来生成相应的元素。

在v-for指令中，你可以添加一个名为index的参数来获取当前项的索引。比如：

li v-for="(item, index) in items" :key="index">{{ index }}

Vue中的v-for指令也可以遍历对象的属性。你可以直接在v-for中使用对象名，Vue会自动遍历对象的每个属性。

li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}