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">&nbsp; &nbsp; <li v-for="(site, index) in sites">&nbsp; &nbsp; &nbsp; &nbsp; <span class='time'>{{site.ntime}}</span>&nbsp; &nbsp; &nbsp; &nbsp; <a title='{{site.qtitle}}'>{{site.ntitle}}</a>&nbsp; &nbsp; &nbsp; &nbsp; <hr v-if="!((index + 1) % 4)" />&nbsp; &nbsp; </li></ul>其中，用(site, index) in sites代替site in sites，index为获取到的元素顺序。这里用到了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">&nbsp; &nbsp; <li v-for="(site, index) in sites" :class="{underline: !((index + 1) % 4)}">&nbsp; &nbsp; &nbsp; &nbsp; <span class='time'>{{site.ntime}}</span>&nbsp; &nbsp; &nbsp; &nbsp; <a title='{{site.qtitle}}'>{{site.ntitle}}</a>&nbsp; &nbsp; </li></ul>