vue搜索关键字标红

实现效果：搜索框搜索关键字后，搜索出的列表名称关键字标红


页面内容：如果包含关键字则拆分成三个字段拼接，不包含刚直接显示字段

<label v-if="item.contain == true"> 
	<font>{{item.start}}</font>
	<font class="intro">{{item.middle}}</font>
	<font>{{item.end}}</font>
</label>
<label v-else>
	{{item.policyName}}
</label>

CSS

.intro{
	color:red;
}

自定义拆分方法

signKeyword (val,index) {
		let keyword = this.isPolicyName  //搜索的值
		if (val.indexOf(keyword) !== -1) {
			// 包含字符前面的下标
			let pre = val.indexOf(keyword)
			// 包含字符的长度
			let end = keyword.length
			this.advanceList[index].contain = true
			// 截取之前的字符
			this.advanceList[index].start = val.slice(0,pre)
			// 中间包含
			this.advanceList[index].middle = keyword
			// 截取之后的字符（包含字符前面的下标+包含字符的长度 = 包含字符之后的下标）
			this.advanceList[index].end = val.substr(pre+end)
			
		} else {
			this.advanceList[index].contain = false
		}
	},

列表遍历

// 判断列表数据中名称是否包含关键字
this.advanceList.map((item,index)=>{
   this.signKeyword(item.policyName,index)
})