javascript - Vue v-for判斷是否為第4列，然後加上橫線或第4行才顯示這一個<li>

Question

<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,翻了好久，沒有解決問題，特來求助。望前輩們指點

Answer 1

<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>

1. 其中，用(site, index) in sites代替site in sites，index為取得到的元素順序。

2. 這裡用到了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>

Answer 2

非常感謝，讓我感受到了學習的快樂與segmentfault的溫暖