vue文本高亮处理

在vue的v-for循环中处理搜索关键字高亮问题，通过截取文字判断，分成三段拼接起来

  <div class="check-list" v-if="shopList.length >0">

                                    <a-checkbox @change="onChangeShop($event,item)"  :checked="checkedList.includes(item.value)" v-for="(item,index) in shopList" :key="index" >

                                        <span class="color-match2"  > {{ item.shopName.substr(0, item.shopName .indexOf(searchValue)) }}</span>
                                        <span class="color-match" >{{ searchValue }}</span>
                                        <span class="color-match2" >{{ item.shopName .substr(item.shopName .indexOf(searchValue)+ searchValue.length)}} </span>
                                    </a-checkbox>

 </div>

//高亮的
.color-match{
    color: #FFFFFF;
}
//非高亮
.color-match2{
    color: #FFFFFF;
    opacity: 0.5;
}