帮我在vue3中，写一个过滤器，要求用a-input组件写一个输入框，当我点击查询按钮时，对输入框内输入的数据和data中定义好的数组中对象的某个值进行比对，一旦比对成功，就输出这个数组中这个比中的对象

好的，以下是在vue3中编写的过滤器代码：

<template>
  <div>
    <a-input v-model="searchText" placeholder="请输入查询内容"></a-input>
    <a-button type="primary" @click="search">查询</a-button>
    <div v-if="result">查询结果：{{ result }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      data: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      result: ''
    }
  },
  methods: {
    search() {
      const match = this.data.find(item => item.name === this.searchText)
      if (match) {
        this.result = match.name + '的年龄是' + match.age
      } else {
        this.result = '未找到匹配项'
      }
    }
  }
}
</script>

这个过滤器会在页面上显示一个输入框和一个查询按钮，当用户输入查询内容并点击查询按钮时，会在data数组中查找是否有一个对象的name属性与查询内容相同，如果有，就将这个对象的name和age属性输出到页面上，如果没有，就输出未找到匹配项。