Vue 实现检索关键字高亮

需求：检索列表，匹配搜索关键字部分高亮

首先判断返回字符中是否包括该关键字，如果包括则进行样式修改。

效果图：

简略代码：

<template>
    //搜索框
    <div>
        <el-col :span="7">
            <input
             class="searchDate"
             v-model="searchcontent"
             placeholder="请输入内容"
             @keyup.enter="getDataList"></input>
        </el-col>
        <el-col :span="1" :pull="2" @click.native="getDataList($event)">
            <img style="margin-top: 10px;cursor: pointer;" src="../../../public/img/main/mryt_fdj.png" alt="" >
        </el-col>
    </div>
    //循环加载的列表
    <div v-for="(item,index) in dataList" :key="item.id">
        <span v-html="item.title"></span>
    </div>
</template>
<script>
  import {fetchNotice} from '@/api/policy/home'
  export default {
    data() {
      return {
        searchcontent:'',//搜索内容
        dataList: [] ,//信息列表
      }
    },
    created() {
      this.getDataList();
    },
    methods: {
      getDataList(e) {
        fetchNotice(Object.assign({
          searchContent : this.searchcontent,
        })).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
          //如果有搜索关键字 进行高亮筛选
          if(this.searchcontent != '') {
            for(let i in this.dataList) {
             //高亮替换
             this.dataList[i].title = this.showData(this.dataList[i].title)
            }
          }
        })
      },
      // 筛选变色 如果搜索结果记录包含关键字，那么修改样式
      showData(val) {
       if (this.checkParam(val,this.searchcontent)) {
        //以 关键词 去分隔字符串 形成一个数组
        let arrry = val.split(this.searchcontent)

        //把数组元素用固定分隔符（此处为已添加高亮的关键词）拼接为一个完整字符串
        val = arrry.join('<font color="#ff0000">' + this.searchcontent + '</font>');
        return val
       } else {
        return val //不做任何修改
       }
      },
      //判断搜索记录是否包含某个关键字
      checkParam(val,param){
        if (val.indexOf(param) !== -1 && param !== ''){
         return true;
        }else {
         return false
        }
      },
    }
  }
</script>