编写一段vue3的模糊查询代码

以下是一个基于Vue3的模糊查询示例代码：

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="search" placeholder="搜索...">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchQuery = ref('')
    const searchResults = ref([])

    const data = [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Cherry' },
      { id: 4, name: 'Durian' },
      { id: 5, name: 'Fig' },
    ]

    function search() {
      searchResults.value = data.filter((item) => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
    }

    return {
      searchQuery,
      searchResults,
      search,
    }
  },
}
</script>

该代码中，我们使用 `ref` 创建了两个响应式变量 `searchQuery` 和 `searchResults`，分别用于存储用户输入的查询关键词和查询结果。

在 `search` 函数中，我们使用 `filter` 方法遍历 `data` 数组，根据 `name` 属性进行模糊匹配，将符合条件的数据存入 `searchResults` 变量中。

在模板中，我们通过 `v-model` 指令将用户输入的查询关键词绑定到 `searchQuery` 变量上，并通过 `@input` 监听输入框的输入事件，触发 `search` 函数进行查询。最后，我们使用 `v-for` 指令遍历 `searchResults` 变量，展示查询结果。