问题描述
需求:我们搜索某个关键字,后端返回给我们一个字符串,这个字符串中包含我们搜索的关键字,我们需要把这个字符串中的关键字部分加上高亮效果(类似于百度搜索关键字高亮的效果)。我们先看一下,大致类似的效果图:
如上图所示,需求很简单,就是关键字高亮。
思路分析
解决方式有两种,第一种就是进行字符串的切割,把关键字切出来,加上一个颜色。这种方式上一篇文章关于字符串的方法整理的文章已经说过了,不赘述,详情可点击链接跳转瞅瞅。
附上地址吧: https://juejin.cn/post/6940274572390301732
接下来我们说第二种方式,使用v-html指令加上字符串的替换方法,话不多说,上代码。
<template>
<div id="app">
<div>
<span v-html="highLight(title)">{{title}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title:"五百年前孙悟空大闹天宫",
searchWord:"孙悟空"
};
},
methods: {
highLight(title){
// 如果标题中包含,关键字就替换一下
if(title.includes(this.searchWord)){
title = title.replace(
this.searchWord,
// 这里是替换成html格式的数据,最好再加一个样式权重,保险一点
'<font style="color:red!important;">'+ this.searchWord +'</font>'
)
return title
}
// 不包含的话还用这个
else{
return title
}
}
},
};
</script>
代码效果图:
DOM元素审查
总结
v-html好像平常不怎么用到这个vue的指令,不过实际上在某些场景下,使用v-html能够很好的解决问题