实现效果:搜索框搜索关键字后,搜索出的列表名称关键字标红
页面内容:如果包含关键字则拆分成三个字段拼接,不包含刚直接显示字段
<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)
})