javascript - Vue v-for判断是否为第4列，然后加个横线或者第4行才显示这一个<li>

问题描述

<ul id='right-notice'> <li v-for='site in sites'><span class=’time’>{{site.ntime}}</span><a title=’{{site.qtitle}}’>{{site.ntitle}}</a> </li> // 思路一：<li 如果是第4行，在这里加一个什么显示属性？></li> // 思路二，如果是第4行，在这里插入一个`<hr>`是否可行</ul>

初学vue,翻了好久，没有解决问题，特来求助。望前辈们指点

问题解答

<ul id='right-notice'> <li v-for='(site, index) in sites'><span class=’time’>{{site.ntime}}</span><a title=’{{site.qtitle}}’>{{site.ntitle}}</a><hr v-if='!((index + 1) % 4)' /> </li></ul>

其中，用(site, index) in sites代替site in sites，index为获取到的元素顺序。

这里用到了v-if。其中对于index值为3（第四项）,7（第八项），11（第十二项）... （4的倍数项），需要显示hr，对于这些值，(index + 1) % 4为0，所以!((index + 1) % 4)为true，显示hr。【这里index按顺序从0开始计数，所以index + 1为表示当前site在sites数组中是第几个，然后(index + 1) % 4，每满4，顺序数除以4余数都为0】

Update:添加class的方法：（假设class名叫underline）

<ul id='right-notice'> <li v-for='(site, index) in sites' :class='{underline: !((index + 1) % 4)}'><span class=’time’>{{site.ntime}}</span><a title=’{{site.qtitle}}’>{{site.ntitle}}</a> </li></ul>回答2：

非常感谢，让我感受到了学习的快乐与segmentfault的温暖