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的溫暖