Vue 3将数组拆分为2列

<template>
  <div>
    <div v-for="column in columns" :key="column">
      <ul>
        <li v-for="item in getItemsByColumn(column)" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
    };
  },
  computed: {
    columns() {
      const totalColumns = 2; // 指定总列数
      const itemsPerColumn = Math.ceil(this.items.length / totalColumns); // 计算每列的元素个数
      const columns = [];

      for (let i = 0; i < totalColumns; i++) {
        const startIndex = i * itemsPerColumn;
        const endIndex = startIndex + itemsPerColumn;
        const columnItems = this.items.slice(startIndex, endIndex);
        columns.push(columnItems);
      }

      return columns;
    },
  },
  methods: {
    getItemsByColumn(column) {
      return this.columns[column];
    },
  },
};
</script>