javascript - Vue v-for détermine s'il s'agit de la 4ème colonne, puis ajoute une ligne horizontale ou la 4ème ligne pour afficher ce <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>

Je suis nouveau sur Vue. Je cherche depuis longtemps et je n'arrive toujours pas à résoudre le problème. Je suis ici pour demander de l'aide. J'espère que les seniors pourront me donner quelques conseils

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. Parmi eux, (site, index) in sites代替site in sites，index se trouve l'ordre des éléments obtenus.

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 est utilisé ici. Chaque fois qu'il atteint 4, le reste après avoir divisé le numéro de séquence par 4 est 0】

Mise à jour :
Comment ajouter une classe : (en supposant que la classe soit nommée 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

Merci beaucoup de m'avoir fait ressentir la joie d'apprendre et la chaleur de segmentfault