vue3中如何将对象转换为数组

在 Vue 3 中，可以使用 ES6 的 Object.entries() 方法将对象转换为数组。该方法返回一个由对象的键值对组成的数组。

以下是一个使用 Object.entries() 方法将对象转换为数组的示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemsArray" :key="index">{{ item[0] }}: {{ item[1] }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: {
        a: 1,
        b: 2,
        c: 3
      }
    }
  },
  computed: {
    itemsArray() {
      return Object.entries(this.items);
    }
  }
}
</script>

在上面的示例中，computed 计算属性 itemsArray 返回 this.items 对象的键值对数组。在模板中，使用 v-for 指令遍历该数组，并将每个数组项的第一项作为键，第二项作为值展示在页面上。

需要注意的是，在使用 Object.entries() 方法时，数组项的顺序与对象属性的定义顺序有关。如果需要按照特定的顺序展示数组项，可以在对象中使用数字作为键，或在转换为数组后使用 Array.sort() 方法进行排序。