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

Posted 2023-02-22

【中文标题】如何限制`v-for`中元素的迭代

【英文标题】：How to limit iteration of elements in `v-for`

【发布时间】：2018-03-19 05:34:34

【问题描述】：

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

【问题讨论】：

向我们展示您的尝试...

VueJs how to make pagination with limiter and range..?的可能重复

【参考方案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>

【讨论】：

如前所述，这只适用于数组，对象会抛出错误。

@Fuseldieb 是的。这就是为什么将数据保存为为数组是非常好的做法，即使您将数据作为对象。它将帮助您以更好的方式使用 Vuejs。

或者您可以在循环本身中设置条件<div v-for="value in (showLess ? array : array.slice(0, 5))></div> <button @click="showLess = false"></button>

在同一元素上包含 v-if 和 v-for 是一种不好的做法 - 尝试避免并添加带有 v-if 条件的包装器

@unplugged 下面的答案是正确答案，这是不好的做法

【参考方案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
  

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

【讨论】：

太棒了！很干净！

【参考方案3】：

你可以试试这个解决方案...

<div  class="body-table  div-table" v-for="(item,index) in items"  :key="item.id" v-if="items && items.length > 0 && index <= limitationList">....

并设置数据限制

data() 
  return 
    limitationList:5
  ;
,

并在你的 btn 中设置一个功能

  <button  @click="updateLimitation(limitationList)">
    show limitationList == 5 ? 'more' : 'less'
  </button>

这是你的方法

updateLimitation(limitationList)
  if (this.limitationList == this.items.length) 
    this.limitationList = 5
  else
    this.limitationList = this.items.length
  

希望对你有用……

【讨论】：

这个解决方案不好，因为 vue 的 v-if 会为每个未通过限制检查的元素留下空白注释。所以你最终会在你的 DOM 中有很多“”。

【参考方案4】：

为了解决这个问题，你可以在计算方法中计算限制列表

喜欢这个

<div  class="body-table  div-table" v-for="(item,index) in filterItems"  :key="item.id">
....

<script>

export default 
  data() 
     return 
       items: [],
       limitationList:5
    ;
  ,
  computed: 
    filterItems () 
      return this.items && this.items.length > 0 && (this.items.length - 1) <= this.limitationList  // or any condition u want 
    
  


</script>

希望有用。