下面一段代码给大家介绍vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),具体代码如下所示:
每一个imglist-item都有margin-right:10px,用绑定class的方法来控制每一行的最后一个没有边距。
这里用到了v-bind:class。其中对于index值为3(第四项),7(第八项),11(第十二项)... (4的倍数项),需要显示hr,对于这些值,(index + 1) % 4为0,所以(index + 1) % 4==0为每一行的最后一个元素,显示hr。【这里index按顺序从0开始计数,所以index + 1为表示当前site在sites数组中是第几个,然后(index + 1) % 4,每满4,顺序数除以4余数都为0】
html:
控制for 循环的次数为两次
以上所述是小编给大家介绍的关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/vue/30482.html