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

可以通过以下步骤来实现在Vue3中搜索数组对象列表并筛选出符合条件的数据展示：

1. 在Vue组件中引入`ref`和`computed`，并定义需要搜索和展示的数组对象列表以及搜索关键字：

import { ref, computed } from 'vue';

export default {
  setup() {
    const list = ref([{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }]);
    const keyword = ref('');
  }
}

2. 使用`computed`计算属性来实现根据关键字筛选出符合条件的数据：

const filteredList = computed(() => {
  return list.value.filter(item => {
    return item.name.toLowerCase().includes(keyword.value.toLowerCase());
  });
});

3. 在模板中展示筛选后的数据：

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

完整代码如下：

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

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

export default {
  setup() {
    const list = ref([{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }]);
    const keyword = ref('');

    const filteredList = computed(() => {
      return list.value.filter(item => {
        return item.name.toLowerCase().includes(keyword.value.toLowerCase());
      });
    });

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