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

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

例如：

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

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

• 利用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;
},

利用正则去替代完美解决~