vue.js - 使用 vueJS 限制 v-for 的结果

Question

简单的问题，我有一个成员列表，我用 v-for 遍历它。

我如何限制结果并只显示前 2 个？

members = [ {id : 1, name: 'Franck'}, {id : 2, name: 'Sophie'}, {id : 3, name: 'Bob'}]
<div v-for="member in members" :key="member.id">
    <p>{{ name }}</p>        
</div>

只是想知道模板是否可行？否则我知道我可以使用过滤它的计算属性，我只需要遍历过滤数组的结果

标签： vue.jsvuejs2

Answer 1

slice()如果您不想使用计算属性，可以在模板中使用。我会选择拥有一个计算属性，如果没有别的，我喜欢在脚本而不是模板中处理所有逻辑。但如前所述，您可以使用 slice：

v-for="(member, index) in members.slice(0, 2)"

@Raffobaffo 在评论中提供的分叉小提琴。