无法理解过滤器中的参数 [VueJS]

Question

当我阅读 VueJS Filter(orderby) API 文档时 我发现很难理解 args。 下面是示例

Arguments:
   {String | Function} targetStringOrFunction
   "in" (optional delimiter)
   {String} [...searchKeys]

任何答案都很棒！

Answer 1

正如Doc 中所述，过滤器filterBy 仅限于期望Array 值的指令，例如v-for.

对于参数：

• 对于 targetStringOrFunction arg ：

假设我们有一个字符串数组，并且您想根据输入的值对其进行过滤，例如，为了实现此目标，您可以像这样使用filterBy：

    new Vue({
    el: '...',

    data: {
        searchedValue: '' // keeping it empty will simply show all results
    }
    ...
});

在 HTML 中：

<div v-for="value in values | filterBy searchedValue">

您可以将searchedValue 绑定到输入以添加效果。

函数部分见下例

• 对于 in 和 {String} [...searchKeys] 参数：

假设我们有一个用户数组，并且在用户对象中我们有一个firstName 和一个lastName 属性，并且您想根据一个值对其进行过滤，为了实现这个目标，您可以使用filterBy像这样：

<div v-for="user in users | filterBy searchedValue in 'firstName'">

或者您可以在多个键中搜索：

<div v-for="user in users | filterBy searchedValue in 'firstName' 'lastName'">

你可以创建一个函数来包装你的代码：

var demo = new Vue({
    el: '#demo',
    data: {
        searchedValue: '',

        users: [
          {firstName: 'Jhone', lastName:'Doe'},
          {firstName: 'Daved', lastName:'Bazz'},
          {firstName: 'Pieter', lastName:'Foo'},
        ]
    },
    methods: {
      myFilter: function(user) {
          return user.firstName == searchedValue; //Or what erev you want here
      }
    },
})

希望有帮助:)