search

Home  >  Q&A  >  body text

javascript - Vue v-for determines whether it is the 4th column, and then adds a horizontal line or the 4th row to display this <li>

<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

世界只因有你世界只因有你2817 days ago885

reply all(2)I'll reply

  • 怪我咯

    怪我咯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>
    1. Among them, replace site in sites with (site, index) in sites, and index is the order of the elements obtained.

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

    reply
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:57:51

    Thank you very much for letting me feel the joy of learning and the warmth of segmentfault

    reply
    0
  • Cancelreply