本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。