需要一段vue3模糊查询的代码

以下是一个简单的 Vue 3 模糊查询示例代码，用于从列表中筛选出匹配关键词的项：

<template>
  <div>
    <input v-model="searchKey" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        { id: 4, name: 'Durian' }
      ],
      searchKey: ''
    };
  },
  computed: {
    filteredItems() {
      const searchKey = this.searchKey.toLowerCase();
      return this.items.filter(item => item.name.toLowerCase().includes(searchKey));
    }
  }
};
</script>

在这个例子中，使用了 Vue 3 中的 `ref` 和 `computed` 函数。`ref` 用于创建响应式数据，`computed` 用于创建计算属性，当 `searchKey` 发生变化时，`filteredItems` 会重新计算，筛选出包含关键词的项。