如何限制我在 VueJs 中的迭代

Question

我有这段代码循环遍历posts对象并填充表。

<table>
    <tr v-for="post in posts" :key="post.id">
        <td>{{post.id}}</td>
        <td>{{post.title}}</td>
        <td>{{post.body}}</td>
    </tr>
</table>

目前我有大约 50 个posts来自posts对象中的第三方 API 调用。

如何将迭代次数限制为仅 10 次，以便不显示所有 50 个帖子而仅显示 10 个帖子？最有效vuejs的解决方法是什么？

PS：我刚开始用vuejs！

Answer 1

您可以跟踪指令中每个元素的索引v-for，然后使用 av-if不渲染超过某个索引：

<tr v-for="post, index in posts" :key="post.id" v-if="index < 10">