0

在此处输入图像描述

          //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
       }
  }

预期结果: 在此处输入图像描述

4

1 回答 1

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>

于 2018-07-06T16:31:19.153 回答