Vue如何动态改变列表搜索出关键词的字体颜色

 brightKeyword(val) {
        let keyword = this.$route.params.keyWord?this.$route.params.keyWord:'';
        keyword = keyword.trim();
        if (keyword && keyword.length > 0) {
          if (keyword == val) {
            return '<span style="color: #007cbb;">' + val + "</span>";
          }
          keyword = keyword.replaceAll(" ", "|");
          let reg = new RegExp(keyword, "ig");
          return val.replace(reg, (match) => {
            return '<span style="color: #007cbb;">' + match + "</span>";
          });
        }
    },

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

.intro {
color: red;
}