html - 是否有执行此布局的 2d for 循环？就像一条捷径

Question

          //1st column
                 <div class="container-1">
                    <div v-for = "item2 in arrayDivs1" class="card-1" > 

                            <q-card-main    >
                                <div  style="background">
                                    <!--<img src="/statics/imgs/serenitea.jpg">-->

                                    <h2>{{item2.price}}</h2>
                                    <!--<q-card-actions>
                                        <q-btn flat label="7:30PM" />
                                    </q-card-actions>  -->
                                </div>
                            </q-card-main>
                      </div>
                  </div>
          //2nd column
                   <div class="container-1">
                    <div v-for = "item2 in arrayDivs1" class="card-1" > 

                            <q-card-main    >
                                <div  style="background">
                                    <!--<img src="/statics/imgs/serenitea.jpg">-->

                                    <h2>{{item2.price}}</h2>
                                    <!--<q-card-actions>
                                        <q-btn flat label="7:30PM" />
                                    </q-card-actions>  -->
                                </div>
                            </q-card-main>
                      </div>
                 </div>
         //3rd column
                    <div class="container-1">
                    <div v-for = "item2 in arrayDivs1" class="card-1" > 

                            <q-card-main    >
                                <div  style="background">
                                    <!--<img src="/statics/imgs/serenitea.jpg">-->

                                    <h2>{{item2.price}}</h2>
                                    <!--<q-card-actions>
                                        <q-btn flat label="7:30PM" />
                                    </q-card-actions>  -->
                                </div>
                            </q-card-main>
                      </div>
                 </div>
     //.. copy paste up to 5th column

什么是更有效的写法？而不是重复编写相同的 HTML/CSS block 5 次？

我们是否可以使用 2d for 循环来使用更少的代码创建此网格布局？喜欢:

 for(var i =0;i<3; i++){
       for(var j =0;j<3; j++){
              //create your 2d cards here
       }
  }

预期结果:

Answer 1

听起来你只是想重复你拥有的数据 N 次。在这种情况下，您可以使用 range v-for重复列。

console.clear()

new Vue({
  el: "#app",
  data: {
    arrayDivs: [0,200,400]
  }
})

#app {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: .25em;
}

.col {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div class= "col" v-for="n in 5">
    <div class="box" v-for="div in arrayDivs">{{div}}</div>
  </div>
</div>