vue数组怎么遍历- 技术经验 -卓越飞翔博客

vue.js 中遍历数组的方法包括：v-for 指令：生成基于数组值的列表项。map() 方法：创建新数组，元素经过指定函数处理。foreach() 方法：对每个元素执行函数，不返回任何值。

vue数组怎么遍历

Vue.js 中遍历数组的方法

在 Vue.js 中，遍历数组有以下几种方法：

1. v-for 指令

v-for 指令是遍历数组的最常用方法。它接受一个数组作为参数，并根据数组中的值生成列表项。

语法：

<div v-for="item in array">...</div>

例如：

<template><ul>
<li v-for="item in items">{{ item }}</li>
  </ul></template><script>
export default {
  data() {
    return {
      items: ['item1', 'item2', 'item3']
    }
  }
}
</script>

这将生成一个包含三个列表项的无序列表，每个列表项显示数组中的一个值。

2. map() 方法

map() 方法创建一个新数组，其中每个元素都是原始数组中元素经过指定函数处理后的结果。

语法：

const newArray = array.map((item, index) =&gt; {...});

例如：

const items = ['item1', 'item2', 'item3'];
const transformedItems = items.map((item) =&gt; item.toUpperCase());

console.log(transformedItems); // ['ITEM1', 'ITEM2', 'ITEM3']

3. forEach() 方法

forEach() 方法对数组中的每个元素执行指定函数，但不会返回任何值。

语法：

array.forEach((item, index) =&gt; {...});

例如：

const items = ['item1', 'item2', 'item3'];

items.forEach((item) =&gt; {
  console.log(item);
});

这将在控制台中打印数组中的每个值。

相关推荐