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>

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

如何将迭代限制为仅10，以便所有50个帖子都不显示，只有10个帖子呢？最vuejs解决问题的方法是什么？

PS ：我刚开始使用vuejs！

Answer 1

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

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

如何限制我在VueJs中的迭代

1 个答案: