vue v-for 循环 循环结果并排div

你可以使用 Vue.js 的 v-for 指令来循环一个数组或对象，并使用 CSS 的 flexbox 布局来将循环结果并排显示。

下面是一个简单的示例代码，展示了如何使用 v-for 循环并排显示 div 元素：

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

<style>
.container {
  display: flex;
}

.item {
  flex: 1;
  margin: 10px;
  padding: 10px;
  border: 1px solid gray;
}
</style>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        // ...
      ]
    };
  }
};
</script>

在上面的代码中，我们将一个容器元素设置为 flex 布局，并通过 v-for 循环渲染 div.item 元素。每个循环的项都通过 :key 属性指定一个唯一的标识符，这对于 Vue.js 来管理和跟踪每个元素的变化非常重要。

然后，我们使用 CSS 来设置每个 div.item 元素的样式，使其并排显示，并具有一些间距和边框。

请注意，这只是一个简单示例，你可以根据自己的需求进行调整和扩展。希望对你有所帮助！