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

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