vue v-for 遍历一个方块6次 怎么每行显示俩个方块 超出就再下一行显示

在Vue中，如果你想通过`v-for`遍历一个数组并且每行显示两个元素，可以结合使用`v-for`和`v-if`或者`v-bind:key`以及模板的换行。假设你有一个数组`items`长度为6：

<template>
  <div class="grid">
    <!-- 每行显示两个元素 -->
    <div v-for="(item, index) in items" :key="index" :class="{ 'item': true, 'row-start': Math.floor(index / 2) === index % 2 }">
      <div>{{ item }}</div> <!-- 这里替换为你的实际内容 -->
      <!-- 如果还有剩余一个元素，单独放在新的一行 -->
      <div v-if="(index + 1) % 2 !== 0 && (Math.floor(index / 2) + 1) * 2 <= items.length">
        {{ items[Math.floor(index / 2) + 1] }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  /* 根据需要设置样式 */
  width: 50%;
  height: 100px; /* 或者你想要的高度 */
  margin-bottom: 10px;
}
.row-start {
  order: -1; /* 将第一个元素放到前一排 */
}
</style>

这里的关键在于计算当前元素的索引是否应该开始新一行(`:class="{ 'row-start': ... }"`)，并用`v-if`来判断是否有额外的一个元素需要单独放置。如果数组长度不是偶数，最后一行可能只有一半的数量。