输入框中绑定数据
<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