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

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

HTML模板：

<template>
  <div>
    <input type="text" v-model="searchText" placeholder="输入关键字" />
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

JS代码：

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

export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
        { id: 4, name: '赵六' },
        { id: 5, name: '钱七' },
      ],
      searchText: '',
    }
  },
  setup() {
    const list = ref([
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' },
      { id: 4, name: '赵六' },
      { id: 5, name: '钱七' },
    ])
    const searchText = ref('')

    const filteredList = computed(() => {
      if (!searchText.value) {
        return list.value
      }
      const search = searchText.value.trim().toLowerCase()
      return list.value.filter((item) => item.name.toLowerCase().indexOf(search) !== -1)
    })

    return {
      list,
      searchText,
      filteredList,
    }
  },
}
</script>

解释：

1. 在HTML模板中，我们创建了一个文本框和一个列表，用于显示查询结果。
2. 在JS代码中，我们首先定义了一个数组`list`，其中包含了一些数据。另外，我们还定义了一个`searchText`变量，用于存储用户输入的关键字。
3. 在`setup`函数中，我们使用`ref`函数将`list`和`searchText`转换成响应式对象，然后使用`computed`函数创建了一个计算属性`filteredList`，用于过滤`list`数组中的数据。具体来说，我们判断如果`searchText`为空，则返回`list`数组中的所有数据；否则，我们使用`filter`函数过滤出所有`name`属性中包含关键字的数据。
4. 最后，我们将`list`、`searchText`和`filteredList`暴露出去，以供HTML模板中使用。