vue中搜索出来的关键字标红

<view class="bigbox" v-for="(item,index) in list" :key="index" @click="checkd(item)">
    <view :class="currents==item.jobId ?'boxsd':'boxs'" v-if="item.contain == true">
		<span>{{item.start}}</span>
		<span class="intro">{{item.middle}}</span>
		<span>{{item.end}}</span>
	</view>
	<view :class="currents==item.jobId ?'boxsd':'boxs'" v-else>
		{{item.jobName}}
	</view>
</view>

列表遍历

this.list.map((item, index) => {
	this.signKeyword(item.jobName, index)
})

 标红的方法

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

	} else {
		this.list[index].contain = false
	}
},			

标红css

.intro {
	color: red;
}