vue实现input输入模糊查询的三种方式

当需要在页面的input输入框中输入内容，并根据输入的内容快速实现模糊查询时，可以使用Vue实现这一功能。下面将介绍三种方式来实现input输入模糊查询。

方式一：watch监听input输入，模糊查询

首先，在Vue组件中定义需要监听的变量（inputValue），并使用watch监听该变量的变化，一旦变化则执行查询操作。具体实现代码如下：

<template>
  <div>
    <input v-model="inputValue" />
    <ul>
      <li v-for="item in itemList">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      itemList: [{ name: "apple" }, { name: "banana" }, { name: "orange" }]
    };
  },
  watch: {
    inputValue: function(val) {
      this.itemList = this.itemList.filter(item =>
        item.name.toLowerCase().includes(val.toLowerCase())
      );
    }
  }
};
</script>

上面的代码中，首先用v-model绑定input输入框的值到inputValue变量上，然后使用watch监听该变量的变化，在其变化时将itemList数组中不满足模糊查询关键字的项移除。

方式二：computed计算属性模糊查询

在Vue的计算属性computed中进行模糊查询操作，当inputValue变量的值发生变化时，computed函数自动执行重新查询数据，并将查询结果绑定到itemList变量上。具体实现代码如下：

<template>
  <div>
    <input v-model="inputValue" />
    <ul>
      <li v-for="item in filteredItemList">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      itemList: [{ name: "apple" }, { name: "banana" }, { name: "orange" }]
    };
  },
  computed: {
    filteredItemList: function() {
      var keyword = this.inputValue.toLowerCase();
      return this.itemList.filter(function(item) {
        return item.name.toLowerCase().includes(keyword);
      });
    }
  }
};
</script>

在上面的代码中，computed的计算属性filteredItemList对itemList进行过滤，只显示匹配上输入框中输入的字符串的数组元素，从而实现了模糊查询的功能。

方式三：使用函数调用实现input输入模糊查询

在Vue的methods中定义方法实现模糊查询，每当input输入框的值发生变化时，执行查询方法，并将查询结果赋值给itemList数组。具体实现代码如下：

<template>
  <div>
    <input v-model="inputValue" @input="search" />
    <ul>
      <li v-for="item in itemList">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      itemList: [{ name: "apple" }, { name: "banana" }, { name: "orange" }]
    };
  },
  methods: {
    search: function() {
      var keyword = this.inputValue.toLowerCase();
      this.itemList = this.itemList.filter(function(item) {
        return item.name.toLowerCase().includes(keyword);
      });
    }
  }
};
</script>

上述代码，定义了一个名为search的方法，在input输入框的值发生变化的时候自动调用该方法，并将过滤后的结果赋值给itemList变量，实现了input输入框模糊查询的功能。

以上就是三种Vue实现input输入模糊查询的方式，可以根据自己的需要选择其中一种方式来实现，在应用开发中会经常用到。