搜索框:
<input type="text" v-model="input_cont" placeholder="请输入搜索关键字" />
其次,要显示的数据使用v-html绑定方法名传递两个参数:(需要标红的数据,搜索框的内容)
<div> <span v-html="redKeyword(item.title,input_cont)"></span> </div>
最后通过创建正则/*构造函数方式*/ new RegExp() 来进行不区分大小写的查找匹配替换
redKeyword(val,keyword){ const Reg=new RegExp(keyword,"i") if(val){ const res=val.replace(Reg,`<span style="color:#e00;">${keyword}</span>`) return res } }
完成