Question

我想说我有一大群人。我想用头发颜色和性别来过滤它们。过滤完成后 - 如何显示结果总数？

这里有一些伪代码可以帮助解释：

Vue.filter('hairFilter', function(person, color){
  return person.filter(function( item ){
    return item.hair == color
  })
});

Vue.filter('genderFilter', function(person, gender){
  return person.filter(function( item ){
    return item.gender == gender
  })
});


<h1>Total Results: [TOTAL FILTERED RESULTS NUMBER HERE]</h1>
<ul>
<li v-for="person in people | hairFilter 'red'| genderFilter 'male'">{{person.name}}</li>
</ul>

提前致谢

Answer 1

您可以使用计算属性和$eval。

{
  computed: {
    filteredPeople: function () {
      return this.$eval("person in people | hairFilter 'red'| genderFilter 'male'");
    }
  }
}

然后在你的模板中做：

<h1>Results {{ filteredPeople.length }}</h1>
<ul>
  <li v-for="person in filteredPeople">{{ person.name }}</li>
</ul>

Vue.js在列表中应用多个过滤器时，如何显示结果的计数/总数

1 个答案: