vue使用v-html实现字符串中关键字（词）的高亮效果

问题描述需求：我们搜索一个关键字，后端返回给我们一个包含我们搜索的key的字符串，我们需要给这个字符串的关键词部分加上高亮效果（类似百度搜索关键词的高亮效果）。我们来看一个大致类似的效果图：如上图，需求很简单，就是关键字高亮。分析思路和解决思路有两种方法。首先是剪字符串，剪出关键词，加上颜色。这样，关于字符串排序方法的文章前面已经说了，就不赘述了。详情可以点击链接跳转看看。附上地址：https://segmentfault.com/a/11...接下来说说第二种方法，使用v-html命令加字符串替换的方法，废话不多说，直接上代码。<脚本>exportdefault{data(){return{title:"500年前孙悟空闹天宫",searchWord:"孙悟空"};},methods:{highLight(title){//如果包含在标题中，则关键字将被替换if(title.includes(this.searchWord)){title=title.replace(this.searchWord,//这里是替换成html格式的数据，为了安全最好加个styleweight''+this.searchWord+'')returntitle}//如果不包含，就用这个else{returntitle}}},};代码渲染：DOM元素回顾总结v-html貌似不太用到这个vue命令，但实际上在某些场景下，使用v-html可以很好的解决问题font标签也可以使用span标签。补充：百度用的是em标签，必须加strong标签