此案例在vue中实现

搜索设备ID示例

<input 
       type="text" 
       name="" 
       placeholder="搜索设备ID" 
       v-model="searchData" 
       @input="search()" />

search() {
      if (this.searchData != '') {
        this.isSearch = true //当用户有输入时，显示搜索结果组件
      } else {
        this.isSearch = false
      }
      let data = []
      if (this.deviceList.length != 0 && this.searchData) { 
        //当设备列表不为空且用户有输入时
        let str = `\S*${this.searchData}\S*`
        let reg = new RegExp(str)
        this.deviceList.map((item) => {
          if (reg.test(item.nDeviceID)) {
            data.push(item)
          }
        })
        //使用正则和map方法，遍历数组对象，将匹配项push到新数组中
      }
      //渲染新数组
      this.searchRes = data
 }