vue中搜索关键词,使文本标红

UserHead.vue中搜索框:

与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('' + inputvalue + "");}}

Userfile.vue中的文本内容:

for="key in mobj"><tdcontenteditablev-model="key.ucontent"v-bind:keys="key.id"class="audiot_style">{{key.ucontent}}
{{key.uname}}--{{key.utime}}{{count}}

data()和vuex的传值就先不赘述了,vue传值看这里