2020-11-05 页面渲染和实际情况不同排查思路 vue中自定义类名让某个搜索的值高亮

86 阅读 0 评论 57 点赞

我是靠谱客的博主苗条长颈鹿，这篇文章主要介绍2020-11-05 页面渲染和实际情况不同排查思路 vue中自定义类名让某个搜索的值高亮，现在分享给大家，希望可以做个参考。

当遇到页面渲染和实际情况不同的时候，应该先控制台element那里节点是否渲染出来
vue中自定义类名：

例如：

复制代码

1
2
<span class="status" :class="'status_'+item.status"></span>

如何让某个搜索的值高亮？

利用v-html插入标签中

‘<‘div class=“title” v-if=“searchName” v-html=“getLightName(item.name)”></div’>’

高亮函数：

getLightName(name) {
if (!name) {
return “”;
}
if (this.searchName && this.searchName.length > 0) {
// 匹配关键字正则
let replaceReg = new RegExp(this.searchName, “g”);
// 高亮替换v-html值
let replaceString =
‘’ + this.searchName + “”;
// 开始替换
name = name.replace(replaceReg, replaceString);
}
return name;
},