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

Question

我对 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 来执行限制，但是使用过滤器来实现这一点会很好。有帮助吗？

Answer 1

你应该使用带有 v-repeat 的过滤器:

Vue.filter('limit', function (array, limit)
{
     return array.slice(0, limit);
});

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

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