如何限制`v-for`中元素的迭代 [英] How to limit iteration of elements in `v-for`
本文介绍了如何限制`v-for`中元素的迭代的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在 Vuejs 2.0
中构建一个小型应用程序 我有大约 15 个迭代元素 我想将 v-for
限制为仅 5 个元素,并且可以有更多按钮以显示整个列表.有没有可能?
解决方案
你可以试试这个代码
<div v-for=array.slice(0, 5)中的值"></div><div v-else><div v-for=数组中的值"></div>
<button @click=showLess = false"></button>
新数组中将只有 5 个元素.
更新:使此解决方案适用于数组和对象的微小变化
<div v-for="(value,index) in object"><模板v-if="索引<=5"></template>
<div v-else><div v-for=对象中的值"></div>
<button @click=showLess = false"></button>
I'm building a small application in Vuejs 2.0
I'm having approx 15 iterating elements I want to limit the v-for
for only 5 elements and can have more buttons to display the whole list. Is there any possibilities?
解决方案
You can try this code
<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>
You will only have 5 elements in the new array.
Update: Tiny change that makes this solution work with both arrays and objects
<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>
这篇关于如何限制`v-for`中元素的迭代的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!