0
<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,翻了好久,没有解决问题,特来求助。望前辈们指点

查看全部 2 个回答

7

已采纳
<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 sitesindex为获取到的元素顺序。

  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>