vue搜索后关键词高亮

输入框中绑定数据 $(.trim是去除前后空格)$

<input v-model.trim="keyword" @keyup.13="enter()" />

在data中注册

data(){   
  return{     
    keyword:"",  
  } 
}

在methods中定义v-html绑定的方法(可直接复制)

changeKeyWord(val) {
 var str = val;
 let keyword = this.keyword;
 let keyWordArr2 = keyword.replace(/\ +/g, ",").split(",");//把空格分开的字符串转换成以逗号分割,然后把字符串转换成数组       
    // 当对话内容中有包含搜索框中的字符串时         
  if (str&& str!= "") {           
    keyWordArr2.forEach((e) => {             
      let regStr = "" + `(${e})`;             
      let reg = new RegExp(regStr, "g");             
      str = str.replace(reg,
         '<span style="color:red; font-weight: bold;">' + e + "</span>" );           
    });         
  }         
  return str;     
}

在文本标签中写上v-html='changeKeyWord'

<p class="title" v-html="changeKeyWord(item.title)"></p>

效果图

![XIQT5Y9T$]{~@N9070LLJ1.png