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

vue.js Vue.js

Near阳光

2020-03-11

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

第715篇《如何限制v-for中元素的迭代》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
猴子Tom 2020.03.11

我来晚了吗 您可以使用计算属性来解决此问题：

<div v-for="value in computedObj">{{value}}</div>
<button @click="limit = null">Shore 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
  }
}

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

entaseven 2020.03.11

您可以尝试此代码

<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" v-if="index <= 5"></div>
</div> 
<div v-else> 
  <div v-for="value in object"></div>
</div> 
<button @click="showLess = false"></button>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android