vue字符串与搜索内容一样的文字颜色变化

页面html

<van-field v-model="searchWord" label="" placeholder="请输入并选择商品名称'" @input="searchGoods"/>
<div class="searchGoodsLine" v-for="(item,index) in searchGoodsList">
	<div  v-html="keyGoodsName(item.goods_name)"></div>
</div>

数据data

searchGoodsList:[],//搜索列表
searchWord:'',//搜索文字

方法methods

/**
* 搜索关键字文字颜色更改
 * @description 可自定义HTML结构
 * @param {String} title - 列表标题
 * @return void
 */
keyGoodsName(title) {
	let s = this.searchWord; // 搜索框的值(您要标红的关键字)
	var str = title; // 列表标题(原文本)
	// 去除中间空格且字符之间用逗号隔开
	let inputvalue = s.replace(/\ +/g, ","); // 把空格分开的字符串转换成以逗号分割
	let keyWordArr2 = inputvalue.split(","); // 把字符串分割转换成数组(方便截取)
	// 判断文本段落(原文本)是否为空
	if (str && str != "") {
		// 遍历分割后的字符串
		keyWordArr2.forEach((e) => {
			let regStr = "" + `(${e})`;
			let reg = new RegExp(regStr, "g");
			// 如果匹配成功则抛出关键字DOM
			// TIPS: 这块您可以自定义标签可根据您的需求自定义样式
			str = str.replace(reg , '<span style="color:#456AE8;">' + e + "</span>"); // 改变搜索关键字颜色为蓝色
		});
	}
	return str;
},

效果：