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

71 阅读 0 评论 47 点赞

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

概述

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

例如：

<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;
},