<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;
}
版权声明:本文为qq_51538602原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。