<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>
I’m new to vue. I’ve been looking through it for a long time and haven’t solved the problem. I’m here to ask for help. I hope the seniors can give me some advice
怪我咯2017-06-26 10:57:51
<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>
Among them, replace site in sites
with (site, index) in sites
, and index
is the order of the elements obtained.
v-if
is used here. Among them, for index values 3 (fourth item), 7 (eighth item), 11 (twelfth item)... (multiples of 4), hr
needs to be displayed. For these values, (index + 1) % 4
is 0, so !((index + 1) % 4)
is true
and displays hr
. [Here index
starts counting from 0 in order, so index + 1
represents the number of the current site in the sites array, and then (index + 1) % 4
, every time it reaches 4, the sequence number is divided by 4The remainder is all 0】
Update:
How to add a class: (assuming the class is named 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>
習慣沉默2017-06-26 10:57:51
Thank you very much for letting me feel the joy of learning and the warmth of segmentfault