javascript - Vue v-for determines whether it is the 4th column, and then adds a horizontal line or the 4th row to display this <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>

I’m new to vue. I’ve been looking through it for a long time and haven’t solved the problem. I’m here to ask for help. I hope the seniors can give me some advice

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. Among them, replace site in sites with (site, index) in sites, and index is the order of the elements obtained.

2. v-if is used here. Among them, for index values ​​​​3 (fourth item), 7 (eighth item), 11 (twelfth item)... (multiples of 4), hr needs to be displayed. For these values, (index + 1) % 4 is 0, so !((index + 1) % 4) is true and displays hr. [Here index starts counting from 0 in order, so index + 1 represents the number of the current site in the sites array, and then (index + 1) % 4, every time it reaches 4, the sequence number is divided by 4The remainder is all 0】

Update:
How to add a class: (assuming the class is named 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

Thank you very much for letting me feel the joy of learning and the warmth of segmentfault