vue项目中map拼接案例

假设有一个数组 `list`，包含以下元素：

[
  { name: 'Tom', age: 18 },
  { name: 'Jerry', age: 20 },
  { name: 'Alice', age: 22 }
]

如果需要将数组中的每个元素的 `name` 属性拼接成一个字符串，可以使用 `map` 方法进行处理，示例代码如下：

const nameList = list.map(item => item.name).join(',')

上述代码中，`map` 方法将数组中的每个元素都映射成 `name` 属性的值组成的新数组，然后使用 `join` 方法将新数组中的所有元素用逗号拼接成一个字符串。最终的结果是：

'Tom,Jerry,Alice'

在 Vue 项目中，可以将以上代码放在组件的 `computed` 计算属性中，以便在模板中使用。例如：

<template>
  <div>{{ nameList }}</div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Tom', age: 18 },
        { name: 'Jerry', age: 20 },
        { name: 'Alice', age: 22 }
      ]
    }
  },
  computed: {
    nameList() {
      return this.list.map(item => item.name).join(',')
    }
  }
}
</script>