写一段vue3模糊查询代码

假设你有一个包含用户信息的数组 `users`，每个用户对象都有一个 `name` 属性。现在你想根据用户输入的关键字做模糊查询，并将匹配的结果展示在页面上。下面是一个简单的 Vue 3 组件代码示例：

<template>
  <div>
    <input v-model="keyword" placeholder="输入关键字">
    <ul>
      <li v-for="user in filteredUsers">{{ user.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' },
        { id: 4, name: 'David' },
      ],
      keyword: ''
    }
  },
  computed: {
    filteredUsers() {
      const keyword = this.keyword.toLowerCase()
      return this.users.filter(user => user.name.toLowerCase().includes(keyword))
    }
  }
}
</script>

上面的代码中，我们使用了 Vue 3 的 `ref` 和 `computed` 函数来创建响应式数据 `users` 和计算属性 `filteredUsers`。`ref` 函数用于包装普通的 JavaScript 对象，使其变成响应式的，而 `computed` 函数则用于创建计算属性，它会根据依赖的数据自动计算出一个新的值。

在模板中，我们使用 `v-model` 指令将用户输入的关键字绑定到 `keyword` 变量上，然后使用 `v-for` 指令遍历 `filteredUsers` 数组，将匹配的用户信息展示在页面上。在 `filteredUsers` 计算属性中，我们使用 `filter` 函数对用户数组进行过滤，只保留那些 `name` 属性中包含关键字的用户对象。注意，在过滤之前，我们将关键字和用户名都转换成小写字母，以便不区分大小写地进行匹配。