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為搜索框中的valueconsole.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><tdcontenteditablev-model="key.ucontent"v-bind:keys="key.id"class="audiot_style">{{key.ucontent}}</td></tr></table></div>

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

總結

以上是生活随笔為你收集整理的vue中搜索关键词,使文本标红的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。