如何限制\`v-for\`中元素的迭代

Question

我正在 Vuejs 2.0 中构建一个小型应用程序--- 我有大约 15 个迭代元素我想限制 v-for 只有 5 个元素，并且可以有更多按钮来显示整个列表。有没有可能？

原文由 Nitish Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以试试这段代码

<div v-if="showLess">
    <div v-for="value in array.slice(0, 5)"></div>
</div>
<div v-else>
    <div v-for="value in array"></div>
</div>
<button @click="showLess = false"></button>

新数组中只有 5 个元素。

更新：使此解决方案同时适用于数组和对象的微小变化

<div v-if="showLess">
  <div v-for="(value,index) in object">
    <template v-if="index <= 5"></template>
  </div>
</div>
<div v-else>
  <div v-for="value in object"></div>
</div>
<button @click="showLess = false"></button>

原文由 Quoc-Anh Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我是不是太晚了？您可以使用计算属性解决此问题：

 <div v-for="value in computedObj">{{value}}</div>
<button @click="limit = null">Show more</button>

然后在数据中：

 data(){
  return {
    object:[], // your original data
    limit: 5 // or any number you wish to limit to
  }
}

最后在您的计算属性中：

 computed:{
  computedObj(){
    return this.limit ? this.object.slice(0,this.limit) : this.object
  }
}

当您单击按钮时，限制被清除并显示/返回整个数据

原文由 unplugged 发布，翻译遵循 CC BY-SA 4.0 许可协议