//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
}
}
最佳答案
听起来你只是想重复你拥有的数据 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>
关于html - 是否有执行此布局的 2d for 循环?就像一条捷径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51213855/