vue3中v-for循环横向排列

在Vue3中，可以通过使用flex布局来实现v-for循环横向排列。

1. 首先，在父元素上设置display:flex和flex-wrap:wrap，使子元素能够自动换行。

2. 然后，在子元素上设置flex:1，使子元素自适应宽度。

3. 最后，在v-for循环中，将每个项渲染为一个子元素即可。

示例代码如下：

<template>
  <div class="container">
    <div class="item" v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  margin: 10px;
  text-align: center;
}
</style>

<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' },
        { id: 6, name: 'item 6' },
        { id: 7, name: 'item 7' },
        { id: 8, name: 'item 8' },
        { id: 9, name: 'item 9' },
      ],
    };
  },
};
</script>