vue 搜索高亮关键字

在一些查询中，我们希望我们查询的关键字，可以在查询内容中高亮出来

this.arr = response.data
   this.caseList = []
   this.arr.forEach(item => {
   this.caseList.push(item)
       console.info(item, '11111111111111')
    })
    this.caseList.map(item => {
       item.context = this.brightKeyword(item.context)
})

brightKeyword(val) {
      let keyword = this.fullSelect
      if (val.indexOf(keyword) !== -1) {
        return val.replace(keyword, `<font color='#ff5134'>${keyword}</font>`)
      } else {
        return val
      }
}

arr是我们从后台获取的数据，我们对arr这个数据进行遍历，将arr数据中的单个数据一个一个取出来，插入我们项目中的caseList中，map方法是返回一个新的数组，在这里的意思是，对caseList数组中context数据进行高亮后，重新生成一个caseList数组

高亮的方法中fullSelect是我们在input框中输入的东西，font标签中的颜色根据自己项目的需要可以更换，其他的照搬就可以啦。这个地方只高亮了内容，当然需要高亮标题或者别的，再map中再加入就可以啦。

这种做法避免了一个弊端是：假如我的关键字在查询过程中没有结果，也可以显示出来，只不过没有高亮效果而已。

但是也存在了一个问题indexOf只会返回第一次与关键字的地方，也就是说假如内容中与关键字匹配的可能有好多处，但是只能高亮第一处

这个问题目前也在寻找方法，找到了再来补充呀~

我自己写的是改进过后的，有需要的可以参考https://www.cnblogs.com/gzw-23/p/12768737.html