vue中搜索关键词,使文本标红 -凯发k8官方网

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中的文本内容:

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

总结

以上是凯发k8官方网为你收集整理的vue中搜索关键词,使文本标红的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。