vue 如何将二维数组转化为一维数组

将二维数组转化为一维数组可以使用 Javascript 的数组方法 flat()。而在 Vue 中，可以使用计算属性来获取转换后的一维数组。

计算属性是一个用来计算 Vue 实例数据的属性，可以基于其它数据进行计算得出。在 Vue 实例中使用计算属性时，只要该计算属性所依赖的数据发生了变化，该计算属性就会重新计算。因此，我们可以使用计算属性来获取每次更新数组后的一维数组，这样就可以随时获得最新的值。

以下是一个简单示例：

<template>
  <div>
    <ul>
      <li v-for="num in flatArr" :key="num">{{ num }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      arr: [
        [1,2,3],
        [4,5,6],
        [7,8,9]
      ]
    };
  },
  computed: {
    flatArr() {
      return this.arr.flat();
    },
  }
}
</script>

在上面的示例中，我们定义了一个二维数组 arr ，然后使用计算属性 flatArr 来获取转化后的一维数组。计算属性的值直接返回二维数组通过 flat() 方法转换后得到的一维数组。

另外，如果想要将数组无论是几维，都转化为一维数组，我们可以使用递归的方法来实现。以下是另一个示例：

function flatArr(arr) {
  const result = [];

  // 遍历数组
  arr.forEach(item => {
    // 如果是数组，则递归调用 flatArr 方法
    if (Array.isArray(item)) {
      result.push(...flatArr(item));
    } else {
      result.push(item);
    }
  });

  return result;
};

const arr = [
  [1, 2, [3]],
  [[4], [5, 6], 7],
  [8, [9, 10, [11, 12]], 13]
];

const flat = flatArr(arr);

console.log(flat); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

在上面的示例中，我们使用了递归的方法来实现了将任意维度的数组转化成一维数组的逻辑。