vue.js实现监听模糊查询

在Vue.js中监听模糊查询可以使用watch监听input框的值的变化，然后通过debounce方法进行防抖处理，最后调用查询方法进行数据查询。

假设你有一个input框和一个用户列表，你想要实现根据输入框的值进行模糊查询用户的功能。首先，你需要在input框上绑定一个v-model指令，将输入的值绑定到data中：

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键字" />
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      userList: []
    };
  },
  watch: {
    keyword: {
      handler: _.debounce(function(newVal, oldVal) {
        this.queryUsers(newVal);
      }, 300),
      immediate: false
    }
  },
  methods: {
    queryUsers(keyword) {
      // 发送模糊查询请求，将结果保存到userList中
    }
  }
};
</script>

在上面的代码中，首先绑定了一个v-model指令将input框的值绑定到keyword属性中。然后使用watch监听keyword属性的变化，通过debounce方法进行防抖处理，最后调用queryUsers方法进行数据查询。

需要注意的是，在handler函数中，使用了_.debounce方法进行防抖处理。这个方法需要引入lodash库，可以通过npm安装：

npm install --save lodash

然后在组件中引入：

import _ from "lodash";

这样就可以实现监听模糊查询的功能了。当用户在input框中输入关键字时，会触发watch监听，然后进行防抖处理，最后调用queryUsers方法进行数据查询。