vue3实现搜索数组对象列表，并且在输入关键字时帅选出符合的数据展示

1. 在Vue3中，可以使用computed属性来实现搜索数组对象列表的功能。

2. 首先，我们需要定义一个data属性来存储原始的数组对象列表，例如：

data() {
  return {
    list: [
      { id: 1, name: '张三', age: 18 },
      { id: 2, name: '李四', age: 20 },
      { id: 3, name: '王五', age: 22 }
    ],
    keyword: ''
  }
}

其中，list存储了我们要搜索的数组对象列表，keyword存储了用户输入的关键字。

3. 然后，我们可以使用computed属性来实现搜索功能，例如：

computed: {
  filteredList() {
    return this.list.filter(item => {
      return item.name.indexOf(this.keyword) !== -1
    })
  }
}

在上面的代码中，我们定义了一个名为filteredList的computed属性，它通过调用filter方法来过滤出符合关键字的数据，并返回一个新的数组对象列表。

4. 最后，我们需要在模板中展示过滤后的数据，例如：

<template>
  <div>
    <input v-model="keyword" placeholder="请输入搜索关键字" />
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

在上面的代码中，我们绑定了一个input元素的v-model指令，用于实现用户输入关键字的功能。然后，我们使用v-for指令来循环展示过滤后的数据。

完整代码如下：

<template>
  <div>
    <input v-model="keyword" placeholder="请输入搜索关键字" />
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 }
      ],
      keyword: ''
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.indexOf(this.keyword) !== -1
      })
    }
  }
}
</script>