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 块 5 次？

有没有我们可以用更少的代码创建这个网格布局的二维 for 循环？像：

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

预期结果：

标签： htmlcssvue.jsflexboxquasar

Answer 1

听起来您只想重复您拥有 N 次的数据。在这种情况下，您可以使用范围 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>