代码之家 › 专栏 › 技术社区 › noogui

有没有做这个布局的2d for循环?就像一条捷径

quasar flexbox vue.js css html

noogui · 技术社区 · 6 年前

第一列 <div class=“container-1”> <DIV V-FOR=“arraydivs1中的项2”class=“card-1”> <Q-CARD-MAIN> <div style=“background”> &!--<img src=“/statics/imgs/serinitea.jpg”>--> <h2>项2.价格</h2> &!--<Q卡操作> <q-btn flat label=“7:30pm”/> </q-card-actions>--> </DIV> </Q-CARD-MAIN> </DIV> </DIV> //第二列 <div class=“container-1”> <DIV V-FOR=“arraydivs1中的项2”class=“card-1”> <Q-CARD-MAIN> <div style=“background”> &!--<img src=“/statics/imgs/serinitea.jpg”>--> <h2>项2.价格</h2> &!--<Q卡操作> <q-btn flat label=“7:30pm”/> </q-card-actions>--> </DIV> </Q-CARD-MAIN> </DIV> </DIV> //第3列 <div class=“container-1”> <DIV V-FOR=“arraydivs1中的项2”class=“card-1”> <Q-CARD-MAIN> <div style=“background”> &!--<img src=“/statics/imgs/serinitea.jpg”>--> <h2>项2.价格</h2> &!--<Q卡操作> <q-btn flat label=“7:30pm”/> </q-card-actions>--> </DIV> </Q-CARD-MAIN> </DIV> </DIV> …复制粘贴到第5列


   写这个的更有效的方法是什么?不是重复5次编写相同的HTML/CSS块?< >

是否有一个二维for循环,我们可以用更少的代码创建这个网格布局?比如:

for(var i=0;i<3;i++){
对于(var j=0;j<3;j++){
//在此处创建二维卡
}
}
预期结果:
.


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


写这个的更有效的方法是什么?不是重复5次编写相同的HTML/CSS块?

是否有一个二维for循环,我们可以用更少的代码创建这个网格布局?像:

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


预期结果:

1 回复 | 直到 6 年前

Bert Jeffrey Shen 6 年前

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>