vue3数组的模糊查询

回答: 在Vue3中，实现数组的模糊查询有多种方法。其中一种方法是通过computed计算属性来实现。你可以在computed中定义一个名为filPerson的计算属性，使用filter方法对personLists数组进行过滤，返回符合条件的结果。具体代码如下：

computed: {
  filPerson() {
    const arr = this.personLists.filter((p) => {
      return p.name.indexOf(this.keyword) !== -1;
    });
    return arr;
  }
},

另一种方法是通过watch监听属性来实现模糊查询。你可以在watch中监听keyword属性的变化，在handler函数中使用filter方法对personLists数组进行过滤，并将结果赋值给personList。具体代码如下：

watch: {
  'keyword': {
    immediate: true,
    handler(val) {
      this.personList = this.personLists.filter((p) => {
        return p.name.indexOf(val) !== -1;
      });
    }
  }
},

这两种方法都可以实现数组的模糊查询，你可以根据自己的需求选择其中一种方法来使用。\[1\]\[2\]
#### 引用[.reference_title]
- *1* *2* [vue的数组 模糊查询与排序内容](https://blog.csdn.net/weixin_45180205/article/details/119777567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue实现模糊查询：filter（）](https://blog.csdn.net/a1598452168YY/article/details/127958248)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]