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

以下是一个简单的 Vue 3 模糊查询的代码示例：

<template>
  <div>
    <label for="search">Search:</label>
    <input type="text" id="search" v-model="query">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  name: 'Search',
  data() {
    return {
      query: '',
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Pineapple' },
      ],
    };
  },
  setup() {
    const query = ref('');
    const list = ref([
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' },
      { id: 4, name: 'Pineapple' },
    ]);

    const filteredList = computed(() => {
      return list.value.filter((item) => {
        return item.name.toLowerCase().includes(query.value.toLowerCase());
      });
    });

    return {
      query,
      list,
      filteredList,
    };
  },
};
</script>

在这个示例中，我们使用了 `ref` 和 `computed` 来创建响应式数据。我们还使用了 Vue 3 的新特性 setup 函数来组织代码。

在模板中，我们使用了一个输入框和一个列表来显示过滤后的结果。我们使用了 `v-model` 指令将输入框的值绑定到 `query` 变量上。

在 setup 函数中，我们创建了 `query` 和 `list` 变量，并使用 `computed` 创建了一个新的响应式变量 `filteredList`，用于存储过滤后的结果。`filteredList` 是根据 `query` 和 `list` 进行计算的。我们使用了 `filter` 方法来过滤列表中不符合条件的项。

最后，我们在返回对象中将 `query`、`list` 和 `filteredList` 导出，以便在模板中使用。