关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)

前端之家收集整理的这篇文章主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面一段代码给大家介绍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】

补充:下面看下vue规定v-for循环的次数

html:

控制for 循环的次数为两次

总结

以上所述是小编给大家介绍的关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/30482.html

猜你在找的Vue相关文章