用vue3写个模糊查询

假设有一个包含多个用户信息的数组 users，每个用户信息包含 name 和 age 两个属性。我们可以使用 Vue 3 的 computed 属性和 v-for 指令实现一个模糊查询功能。

HTML 代码：

<div id="app">
  <input v-model="searchText" placeholder="输入关键字进行搜索">
  <ul>
    <li v-for="user in filteredUsers" :key="user.name">
      {{ user.name }}（{{ user.age }}岁）
    </li>
  </ul>
</div>

Vue 3 代码：

const app = Vue.createApp({
  data() {
    return {
      searchText: '',
      users: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 },
        { name: '赵六', age: 35 },
      ],
    }
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user =>
        user.name.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  }
})

app.mount('#app')

在 computed 中定义一个 filteredUsers 计算属性，它会根据当前的 searchText 进行模糊查询并返回一个过滤后的用户数组。在 HTML 中使用 v-for 指令遍历 filteredUsers 数组并显示每个用户的姓名和年龄。

运行代码后，在输入框中输入关键字可以看到页面上只显示匹配的用户信息。