使用 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>

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

Answer 1

经过这里的一些讨论，让我们将答案分为两部分：

一种快速但不是超级正确的方法，但仍然参考inside vue docs 使用 v-if 并在 v-for 中设置和索引。

<div v-for="(member, index) in members" :key="member.id" v-if="index < 3">
    <p>{{ name }}</p>        
</div>

否则，最正确的方法是创建一个只返回您需要的元素的计算属性：

  <template>
       <div v-for="member in justTwoElements" :key="member.id">
         <p>{{ name }}</p>        
      </div>
  <template>

  ....
  computed: {
       justTwoElements: function(){
           return this.members.slice(0,2);
       }
   }

当您的数据输入量很大时，这个最新的解决方案更能体现出来，使用它而不是第一个解决方案的好处得到了很好的解释here.

我希望这有助于为您提供正确的路径

Answer 2

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

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

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