小工具知识网

当前位置: 首页 > 行业知识 > vue2-computed,vue3+watch 前端实现列表搜索,结合filter+some+indexOf

行业知识

vue2-computed,vue3+watch 前端实现列表搜索,结合filter+some+indexOf

2026-10-26 03:34:17 来源:互联网转载

vue2  computed实现

  computed: {    FBAAddressListComputed () {      if (!this.fbaInput) return this.FBAAddressList      const lowerCaseInput = this.fbaInput.toLowerCase()      return this.FBAAddressList.filter((item) => {        return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city,                         item.address].some(          (field) => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1        )      })    },  },

vue3 通过 watch 实现搜索 

  watch(fbaInput, newV => {    if (fbaInput.value === '') {      searchFbaList.value = FBAAddressList.value      return    }    const lowerCaseInput = fbaInput.value.toLowerCase()    searchFbaList.value = FBAAddressList.value.filter(item => {      return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city,                     item.address].some(        field => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1      )    })  })

 

上一篇:Sh文件揭秘,操作指南与功能详解

下一篇:海康威视门禁主机怎么开门视频