是否有进行此布局的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块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;
}