实现效果：

录制_2023_07_17_17_16_09_238.gif

写在前面：ui框架使用vant2，使用vant自带的搜索框被查找数组对象

        medicineList: [
                {
                    medicineName: '小柴胡(门特)',
                    medicineSpecification: '1g*1000',
                    medicinePrice: '0.06625'
                },
                {
                    medicineName: '云南白药(门诊)',
                    medicineSpecification: '1g*1000',
                    medicinePrice: '0.06625'
                },
                {
                    medicineName: '延胡索(门特)',
                    medicineSpecification: '1g*1000',
                    medicinePrice: '0.06625'
                },
            ],

实现步骤：

1.为搜索框绑定一个keyword

  <!-- 搜索框 -->
  <van-search placeholder="请输入搜索关键词" v-model="keyword" @focus="focusSearch" />

2.编写computed逻辑

computed: {
        filteredMedicineListFun() {
            if (this.keyword === '') {
                return this.medicineList;
            }

            const filteredList = this.medicineList.filter(medicine =>
                medicine.medicineName.toLowerCase().includes(this.keyword.toLowerCase())
            );
            console.log("computed"+filteredList)
            //   this.filteredMedicineList = filteredList
            return filteredList;
        }
    },

如果关键词不为空，使用filter函数对药品列表进行筛选。filter函数接受一个匿名函数作为参数，用于判断每个药品的medicineName是否包含关键词。如果包含，该药品将保留在筛选后的列表中。计算属性可以根据响应式依赖的变化进行自动更新。在keyword发生变化时，filteredMedicineListFun会被重新计算，并返回新的筛选结果。

3.在页面上简单展示

<ul>
 <li v-for="medicine in filteredMedicineListFun" :key="medicine.medicineName">
    {{ medicine.medicineName }} - {{ medicine.medicineSpecification }} -
    {{medicine.medicinePrice }}
 </li>
</ul>

结语：到此完成，通过三步，就可以简单实现一个搜索框功能

【Vue】使用computed属性实现一个搜索框，实现搜索数组对象功能