vue for循环 一行放5个数据 外层使用flex布局
html:<template v-for="(item, i) in aa" ><div style="width:100%;display: flex;justify-content: flex-start;align-items: center;" v-if="i%5==0" ><div style="width: 19%;display: flex;justif
·
html:
<template v-for="(item, i) in aa" >
<div style="width:100%;display: flex;justify-content: flex-start;align-items: center;" v-if="i%5==0" >
<div style="width: 19%;display: flex;justify-content: flex-start;align-items: baseline;" v-for="(item, i) in shuzu(aa,i)">
<span style="font-size: 0.8rem;width:55%;text-align: center">{{ item.bb }}</span>
<div class="form-group" style="width:45%">
<input class="form-control form-control-sm" type="text" placeholder="2日" disabled>
</div>
</div>
</div>
</template>
JS:
<script>
export default {
data () {
return {
aa:[
{bb:'AA'},
{bb:'BB'},
{bb:'CC'},
{bb:'DD'},
{bb:'EE'},
{bb:'FF'},
{bb:'HH'},
{bb:'II'},
{bb:'GG'},
{bb:'KK'},
{bb:'LL'},
],
}
},
methods:{
shuzu(items,i){
let arryy = [];
let oldarr = items;
for(let y = i; y < oldarr.length; y++) {
if (arryy.length < 5) {
arryy.push(items[y]);
} else {
break;
}
}
return arryy;
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)