vue3纯前端实现模糊查询

在Vue3中实现模糊查询通常涉及到数据绑定、事件监听和过滤数组等功能。以下是一个简单的步骤：

1. **数据准备**：首先，你需要有一个包含你想模糊搜索的数据列表，比如用户列表。你可以通过API获取，或者本地存储。

data() {
  return {
    users: [
      { name: '张三', email: 'zhangsan@example.com' },
      // ...
    ],
    keyword: '',
  };
}

2. **表单输入绑定**：设置一个`v-model`指令将用户的输入绑定到`keyword`变量上。

<input type="text" v-model="keyword">

3. **过滤函数**：创建一个名为`filterUsers`的方法，该方法接收关键词作为参数，返回一个新的只包含匹配项的用户列表。

methods: {
  filterUsers(keyword) {
    return this.users.filter(user => {
      return user.name.includes(keyword) || user.email.includes(keyword);
    });
  }
}

4. **监听输入变化**：在用户输入框失去焦点或者按下Enter键时，触发搜索。

<input @input="onInputChange" @keyup.enter="search">

5. **响应式搜索**：在`onInputChange`方法中，调用`filterUsers`方法，并更新数据视图。

methods: {
  onInputChange(e) {
    this.search();
  },
  search() {
    this.users = this.filterUsers(this.keyword);
  },
}

6. **显示过滤结果**：在模板中展示处理后的用户列表。

<ul>
  <li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.email }}</li>
</ul>