前端通过Vue自己实现输入框模糊筛选数据，并将筛选结果展示

业务场景是后端返回数据，前端通过input输入框进行模糊筛选，并将筛选结果展示在下面 例如接口返回的数据为： [{id:1, name:“课程1”} {id:2, name:“课程2”} {id:3, name:“续报”}] input输入框输入: 续报 结果显示为： 续报

input输入框输入: 课程 结果显示为： 课程1 和 课程2

<el-input placeholder="请输入内容" v-model="input" @blur="validateCounts" > <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>

将目标数据进行渲染

<div class="content-item" v-for="(item, index) in recommendedOrders" :key="index" >{{item.name}}</div>

将接口数据进行遍历，对满足筛选条件的数据进行存储，然后在页面进行渲染

validateCounts () { // 输入的内容 let valueInput = this.input || '' // 存储筛选后的结果 const temp = []; // 将接口数据进行遍历 (this.recommendedOrdersBack || []).forEach((item) => { if(item.name.indexOf(valueInput) >= 0){ temp.push(item) } }) // 将筛选结果的数据存储 this.recommendedOrders = temp },