自定义 v-repeat 过滤器 Vue.js

Posted 2023-02-22

【中文标题】自定义 v-repeat 过滤器 Vue.js

【英文标题】：Custom v-repeat filter Vue.js

【发布时间】：2015-07-31 06:24:21

【问题描述】：

我对 Vue.js 还是很陌生，两天前才开始尝试它——如果这是一个愚蠢的问题，请见谅。

我有一个列表，我想限制返回列表的对象数量。我创建了一个自定义过滤器：

Vue.filter('limit', function (value, number) 
    for(var i = 0; i < number; i++)
        return value;
    
);

并应用它：

<div class="project col-lg-4" v-repeat="projects | limit 3">

但似乎没有任何改变。我知道我可以只使用一些额外的 js 来执行限制，但是使用过滤器来实现这一点会很好。 有什么帮助吗？

【参考方案1】：

您应该使用带有v-repeat 的过滤器：

Vue.filter('limit', function (array, limit)

     return array.slice(0, limit);
);

然后像这样简单地使用它：

<li v-repeat="products | limit 3">