输入框输入“申报”,列表中的title和content均显示黄色背景

58 阅读1分钟
   需求:输入框输入“申报”,列表中的title和content均显示黄色背景
   
   关键代码:
   // 定义一个正则表达式,第一个参数是输入框绑定的变量
   var reg = new RegExp(this.inputValue, 'ig')
   // 准备替换内容,绑上输入框变量
   var res = "<span style='background-color:yellow'>" + this.inputValue + '</span>'
   // 替换内容
   item.content = item.content.replace(reg, res)
   
   
   // 遍历列表,替换匹配到的数据,并保存到元数据中
   this.infoList = this.infoList.map(item => {
      if (this.inputValue) { // 当输入框存在值时
        let reg = new RegExp(this.inputValue, 'ig')
        let res = "<span style='background-color:yellow'>" + this.inputValue + '</span>'
        item.content = item.content.replace(reg, res)
        item.title = item.title.replace(reg, res)
        return item
      } else return res.data.data
    })
  })

image.png