javascript - Vue v-for menentukan sama ada ia adalah lajur ke-4, dan kemudian menambah garis mendatar atau baris ke-4 untuk memaparkan <li> ini

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>

Saya baru menggunakan Vue. Saya telah mencari untuk masa yang lama dan masih tidak dapat menyelesaikan masalah saya di sini untuk meminta bantuan. Saya harap senior boleh beri saya nasihat

Answer 1

<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. Antaranya, (site, index) in sites代替site in sites，index ialah susunan unsur yang diperolehi.

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 digunakan di sini Setiap kali mencapai 4, bakinya selepas membahagikan nombor urutan dengan 4 ialah 0】

.

Kemas kini:
Cara menambah kelas: (dengan mengandaikan kelas itu dinamakan 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>

Answer 2

Terima kasih banyak kerana membiarkan saya merasai kegembiraan belajar dan kehangatan segmentfault