Vue中循环div 使得div以两行十列显示

在vue中，div两行十列显示
需要以循环的方式实现
之前试过el-row排版但是没奏效

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇博客: Vue实现Div并列的方法中的 不同情况下，Div并列的实现方法 部分也许能够解决你的问题。
  • 以下回答由chatgpt基于相关博客总结生成:

    我可以提供一个解决方案：

    首先，在Vue中，您可以使用v-for指令循环生成您所需的div。

    然后，为了将div排列为两行十列，您可以使用CSS的Flexbox布局。

    以下是具体的步骤：

    1. 在模板（template）中定义一个包含两个div的容器，一个用于一行，另一个用于第二行：
    <div class="container">
  <div class="row">
    <div v-for="item in items" class="column">
      <!-- 这里可以放入你的div内容 -->
    </div>
  </div>
  <div class="row">
    <div v-for="item in items" class="column">
      <!-- 这里可以放入你的div内容 -->
    </div>
  </div>
</div>
    1. 在CSS中，使用Flexbox布局来实现两行十列的效果。为容器（container）添加display: flex，并设置flex-wrap: wrap，以便在需要时折行。
    .container {
  display: flex;
  flex-wrap: wrap;
}

.row {
  width: 100%;
  display: flex;
}

.column {
  flex-basis: 10%;
  /* 这里可以定义每个div的宽度，根据您的需求可以调整 */
}
    1. 在Vue实例中，定义items数组，通过v-for指令循环生成所需的div。
    new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // 根据您的需求设置具体的数据
  }
});

    这样，您就可以通过v-for循环将div以两行十列的方式显示出来了。

    希望这个解决方案对您有帮助！如果您还有任何问题，请随时提问。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

代码看看

img

最简单的就是 v-for套两层

 <div v-for="(item, index) in 2" :key="index" class="v">  
         <div v-for="(item1,index1) in 10">
           {{ index1}}
         </div>
      </div>  

.v{
  display:flex;
}

img