javascript - Vue v-for bestimmt, ob es sich um die vierte Spalte handelt, und fügt dann eine horizontale Linie oder die vierte Zeile hinzu, um dieses <li> anzuzeigen

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>

Ich bin neu bei Vue. Ich habe lange gesucht und kann das Problem immer noch nicht lösen. Ich bin hier, um um Hilfe zu bitten. Ich hoffe, die Senioren können mir einen Rat geben

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