vue搜索关键字高亮

    <template>
        <el-input
          class="fd-ipt"
          placeholder="请输入内容"
          v-model="inputValue"
          @keyup.enter.native="searchText">
        </el-input>
        <div class="container" v-for="(v, k, i) in htmlContent" :key="i">
            <h3 class="fd-title" v-html="v.title"></h3>
            <div class="fd-content" v-html="v.content"></div>
        </div>
    </template>
    <script>
        export default {
          data() {
            return {
              inputValue:'', 
              htmlContent:[{
                  "title":"第一章",
                  "content":"他是无意穿堂风，却偏偏孤据引山洪。"
                  },{
                  "title":"第二章",
                  "content":"我记得我无数次点开对话框，却只"
                  }]
              }
            },
      methods: {
        searchText() {  
            if (_this.inputValue) {
            // 每次查询之前清空原数据中标签,防止再次查询时,查不到
            if (document.querySelectorAll('.highlight').length > 0) {
                this.htmlContent.forEach((item, index) => {
                this.$set(_this.htmlContent[index], 'title', item.title.replace(/<[^<>]+>/g, ""))
                this.$set(_this.htmlContent[index], 'content', item.content.replace(/<[^<>]+>/g, ""))
                })
            }
            const regExp = new RegExp(_this.inputValue, 'g');
            this.htmlContent.forEach((item, index) => {
                // 采用$set方法  防止切换数据后,视图不更新
                this.$set(_this.htmlContent[index], 'title', item.title.replace(regExp, `<span class="highlight">${_this.inputValue}</span>`))
                this.$set(_this.htmlContent[index], 'content', item.content.replace(regExp, `<span class="highlight">${_this.inputValue}</span>`))
            })
            } 
        },
    }};
     
    </script>
     
    <style>
     
    .highlight {
      color: red;
    }
     
    </style>