Vue中遍历数组的新方法实例详解

下面我就为您详细讲解“Vue中遍历数组的新方法实例详解”。

介绍

在Vue 2.6.0版本以后，新增了一个数组方法v-for，它主要用于遍历一个数组并渲染每个数组元素。

v-for能够将一个数组映射为一组元素，并为每个元素执行一次模板，因此它的应用场景非常广泛，尤其在将复杂数据渲染到界面上时，更是体现了它的优势。

下面就重点介绍一下v-for在其中的应用。

语法

v-for的语法如下：

v-for="(item, index) in items"

其中：

• item为数组中的每一项
• index为项的索引
• items为要遍历的数组

你也可以不指定索引，只使用数组项：

v-for="item in items"

示例1: 元素遍历

下面是一个简单的使用v-for遍历一个字符串数组并将每个元素渲染为一个li元素的例子：

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

<script>
export default {
  data() {
    return {
      list: ['张三', '李四', '王五']
    }
  }
}
</script>

在这个例子中，我们首先通过v-for="(item, index) in list"遍历了一个字符串数组，所以item代表数组的每一项，index代表数组项的索引。

然后我们通过:key="index"为每个li元素指定了一个Key，这是为了在Vue中提高效率。

最后，我们通过双括号{{}}将每个数组项渲染到界面上。

示例2: 对象遍历

下面是一个使用v-for遍历一个包含对象的数组的例子：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      名字：{{item.name}}, 年龄：{{item.age}}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {name: '张三', age: 18},
        {name: '李四', age: 20},
        {name: '王五', age: 22}
      ]
    }
  }
}
</script>

在这个例子中，我们通过v-for="(item, index) in list"遍历了一个包含对象的数组，并使用{{item.name}}和{{item.age}}渲染了每个对象的属性。需要注意的是，我们可以在双括号{{}}中直接访问对象的属性。

另外需要注意的是，如果我们只访问对象的值而不访问键或索引，可以使用简化的v-for="item in list"语法。