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

【问题标题】：Custom v-repeat filter Vue.js自定义 v-repeat 过滤器 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">

【讨论】：