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

Posted fm060

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了limitBy过滤器是配合数组使用的,限制数组元素的个数,话不多说,来个小例子。相关的知识,希望对你有一定的参考价值。

<div id="box">

<ul>

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

{{val}}

< >

</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}}

< >

</ul>

</div>

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


闪电是/ li

  

以上是关于limitBy过滤器是配合数组使用的,限制数组元素的个数,话不多说,来个小例子。的主要内容,如果未能解决你的问题,请参考以下文章

vue如何自定义过滤器

过滤器-limitBy

如何在mouseover事件中删除limitTo过滤器的限制?

vue使用技巧(分页)

jQuery中的$.grep()方法的使用

Vue.js 学习