vue3模糊搜索功能

Vue3中的模糊搜索功能通常通过组件配合`v-model`、事件监听以及过滤数组来实现。以下是一个简单的步骤：

1. **设置数据**: 创建一个包含搜索关键词的数据属性，如`searchKey`。

data() {
  return {
    searchKey: '',
    items: [], // 这里假设items是你需要搜索的对象列表
  };
}

2. **输入框绑定**: 在HTML模板中，创建一个输入框，并使用`v-model`将用户输入绑定到`searchKey`。

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

3. **自定义过滤函数**: 定义一个方法，比如`filteredItems`，该方法接收当前的搜索关键词，然后过滤出匹配的项目。

methods: {
  filteredItems() {
    if (!this.searchKey) {
      return this.items;
    }
    return this.items.filter(item => item.name.includes(this.searchKey));
  },
}

这里假设`items`列表每个对象都有一个名为`name`的属性用于搜索。

4. **动态渲染**: 在视图中，使用`<ul>`或其他容器，遍历`filteredItems`返回的结果来显示搜索结果。

<ul>
  <li v-for="(item, index) in filteredItems" :key="index">{{ item.name }}</li>
</ul>

5. **事件监听**: 如果希望实时搜索，可以添加`@input`事件监听器，在输入框内容变化时触发过滤。

<input type="text" v-model="searchKey" @input="filteredItems">

**