問題描述

<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行，在這里加一個(gè)什么顯示屬性？></li> // 思路二，如果是第4行，在這里插入一個(gè)`<hr>`是否可行</ul>

初學(xué)vue,翻了好久，沒有解決問題，特來求助。望前輩們指點(diǎn)

問題解答

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

其中，用(site, index) in sites代替site in sites，index為獲取到的元素順序。

這里用到了v-if。其中對于index值為3（第四項(xiàng)）,7（第八項(xiàng)），11（第十二項(xiàng)）... （4的倍數(shù)項(xiàng)），需要顯示hr，對于這些值，(index + 1) % 4為0，所以!((index + 1) % 4)為true，顯示hr?！具@里index按順序從0開始計(jì)數(shù)，所以index + 1為表示當(dāng)前site在sites數(shù)組中是第幾個(gè)，然后(index + 1) % 4，每滿4，順序數(shù)除以4余數(shù)都為0】

Update:添加class的方法：（假設(shè)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>回答2：

非常感謝，讓我感受到了學(xué)習(xí)的快樂與segmentfault的溫暖