vue实现模糊查询的前端代码

假设你有一个输入框，用户可以输入要搜索的关键词，然后在前端实现模糊查询的代码如下：

<template>
  <div>
    <input v-model="keyword" @input="search" />
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Pineapple' },
        { id: 5, name: 'Watermelon' },
      ],
    };
  },
  computed: {
    filteredList() {
      // 使用 JavaScript 的 filter 方法实现模糊查询
      return this.list.filter((item) =>
        item.name.toLowerCase().includes(this.keyword.toLowerCase())
      );
    },
  },
  methods: {
    search() {
      // 可以在这里添加 debouncing 或者 throttling 以减少请求次数
    },
  },
};
</script>

这个代码示例中，我们首先定义了一个 `keyword` 变量来存储用户输入的关键词，然后使用 `v-model` 将输入框与 `keyword` 双向绑定。在输入框输入时，我们调用了 `search` 方法来触发模糊查询。

在 `filteredList` 计算属性中，我们使用 JavaScript 的 `filter` 方法来实现模糊查询。具体来说，我们遍历了 `list` 数组中的每个元素，使用 `includes` 方法判断该元素的 `name` 属性中是否包含了关键词，如果包含则返回 `true`，否则返回 `false`。最后，我们返回一个新数组，其中只包含了 `filter` 方法返回了 `true` 的元素。

最后，在模板中，我们使用 `v-for` 来遍历 `filteredList` 数组，并渲染列表项。