欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 前端技术 > vue >内容正文

vue

vue中搜索关键词,使文本标红 -ag凯发k8国际

发布时间:2024/10/12 vue 29 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 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传值看这里

总结

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

如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

  • 上一篇:
  • 下一篇:
网站地图