vue中搜索關鍵詞,使文本標紅

UserHead.vue中搜索框:

<!-- 搜索 -->
      <el-col :span="6" :offset="8" class="search">
        <el-input placeholder="請輸入內容" v-model="inputvalue" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>

與button綁定的事件:

search() {
      //translateText爲從vuex穿過來的對話內容；
      // inputvalue爲搜索框中的value
      console.log(this.translateText);
      console.log(this.inputvalue);
      // 獲取全部對話內容的dom節點
      var audiot_style = document.getElementsByClassName("audiot_style");
      var translateText = this.translateText;
      var inputvalue = this.inputvalue;
      // 遍歷全部對話文本內容
      for (let i = 0; i < translateText.length; i++) {
        // 當對話內容中有包含搜索框中的字符串時
        if (translateText[i].ucontent.indexOf(inputvalue) >= 0) {
          // 先將包含關鍵字的對話內容拆分爲數組
          var values = translateText[i].ucontent.split(inputvalue);
          // 而後再以一段設置了css樣式的標籤爲分隔符,將數組拼接爲字符串
          // 再賦值給對應的dom,讓其節點的innerhtml爲這個字符串
          audiot_style[i].innerHTML = values.join(
            '<span style="color:red;">' + inputvalue + "</span>"
          );
        }
      }

Userfile.vue中的文本內容:

<div class="translate_content">
        <table v-for="key in mobj">
          <tr>
            <td class="td_user">
              {{key.uname}}--
              {{key.utime}}
              {{count}}
            </td>
          </tr>
          <tr>
            <td
              contenteditable
              v-model="key.ucontent"
              v-bind:keys="key.id"
              class="audiot_style"
            >{{key.ucontent}}</td>
          </tr>
        </table>
      </div>

data()和vuex的傳值就先不贅述了,vue傳值看這裏