vue之limitBy过滤器（限制v-for循环个数和循环起始项）

limitBy过滤器是配合数组使用的，限制数组元素的个数，话不多说，来个小例子。

<div id="box">

<ul>

<li v-for="val in arr | limitBy 2">

{{val}}

</li>

</ul>

</div>

<>

var vm=new Vue({

data:{

arr:[1,2,3,4,5]

},

methods:{

}

}).$mount('#box');

</>

可以看到，我在li标签里面循环数组时，添加了limitBy过滤器，所以，本来可以显示五条数据的列表，会变成两条数据。

上面的小例子，limitBy默认是从数组的第一个元素开始显示，那么，如果我想从第二个或者第三个开始显示，又该怎么做呢，这里我们给limitBy在添加一个参数，上代码

<div id="box">

<ul>

<li v-for="val in arr | limitBy 2 1">

{{val}}

</li>

</ul>

</div>

那么在这个例子中，第二个参数1，为数组的下标，所以，结果显示的是2，3，如果我将第二个参数改成arr.length-2，那么显示的将是数组最后两个元素。

转载于:https://my.oschina.net/u/3499937/blog/914904