vue应用flex布局做自调节宽度到5的倍的div通配
原创我的实施已经完成。html中双层for循环做的
首先让我们处理数组数据,因为我们都是。5这些元素分为一个div
查看数据格式:
data() {
return {
examList: [
{
title: 正题,
listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
{
title: 正题1,
listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
},
{
title: 正题2,
listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
{
title: 正题3,
listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
{
title: 正题4,
listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
{
title: 正题5,
listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
}
]
};
},
.....
splitItemEveryFive(exam) {
return Math.floor(exam.listData.length / 5) + 1;
},
上面的代码我们首先把他的父亲放在上面。div写出来了, 例如,我们有13元素。然后我们横穿4次父亲div,然后是subdiv中 根据较低值循环5次
子div中的处理
afterSplitList(exam, start) {
return exam.listData.slice(start * SPLIT_NUM, start * SPLIT_NUM + SPLIT_NUM);
},
完整代码:
{{ exam.title }}
效果如图所示:
版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除