vue3根据下拉菜单进行模糊查询

在 Vue3 中，实现下拉菜单的模糊查询通常会结合 `v-model`、`@input` 事件以及数据过滤功能。下面是一个简单的例子：

首先，创建一个包含选项的数据数组，假设我们有一个城市列表：

data() {
  return {
    cities: ['北京', '上海', '广州', '深圳', '杭州', '成都'],
    searchKey: '',
  };
},

然后，在模板部分，可以使用 `v-model` 绑定搜索关键词，并监听输入变化：

<template>
  <select v-model="searchKey" @input="fetchFilteredCities">
    <option value="">全部</option>
    <option v-for="(city, index) in filteredCities" :key="index">{{ city }}</option>
  </select>
</template>

接下来，定义一个计算属性 `filteredCities` 来过滤出匹配搜索关键词的城市：

computed: {
  filteredCities() {
    const regex = new RegExp(this.searchKey, 'i'); // case-insensitive match
    return this.cities.filter((city) => regex.test(city));
  },
},

最后，在 `fetchFilteredCities` 函数里，当用户输入改变时，更新 `filteredCities` 计算属性，显示匹配的结果：

methods: {
  fetchFilteredCities(e) {
    this.filteredCities = e.target.value ? this.filteredCities : this.cities;
  },
},

这样，每当用户在下拉框中输入内容时，Vue会自动筛选出包含匹配关键字的城市供选择。