本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码,供大家参考,具体内容如下
1. 需要解决的问题
- 父组件将搜索的字段传到子组件
- 子组件接受数据,正则匹配,并替换字段
2. 具体代码
父组件代码
<template> <div> <div v-if="showMe"> <div class="re_search"> <svg @click="$router.go(-1)"> <use xmlns:xlink="http://_gray2; border: 0.01rem solid #ddd; padding: 0.01rem; border-radius: 3px; i { font-style: normal; } } } .business_code, .business_other { font-size: .25rem; margin-top: .3rem; line-height: .25rem; } } .code_num { svg { width: .3rem; height: .3rem; fill: #ffaa0c; } } .zsd { font-size: .25rem; height: .35rem; line-height: .3rem; padding: 0 0.05rem; display: inline-block; color: @baseBlue; background: #fff; border: 0.01rem solid @baseBlue; box-sizing: border-box; border-radius: 3px; } .fnzs { font-size: .25rem; height: .35rem; padding: 0 0.05rem; line-height: .3rem; display: inline-block; background: @baseBlue; color: #fff; border: 0.01rem solid @baseBlue; box-sizing: border-box; border-radius: 3px; } }</style>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。