Vue实现搜索结果高亮显示关键字

这篇文章主要为大家详细介绍了Vue实现搜索结果高亮显示关键字，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码，供大家参考，具体内容如下

1. 需要解决的问题

• 父组件将搜索的字段传到子组件
• 子组件接受数据，正则匹配，并替换字段

2. 具体代码

父组件代码

      <!----> .re_search{ background:#0096ff; line-height:0; padding: .2rem; svg{ width:.6rem; height:.6rem; } input[type="search"]{ display:inline-block; height:.9rem; width:8rem; outline: none; border: none; border-radius:.45rem; background:#f2f2f2; box-sizing: border-box; padding: 0 .5rem; font-size:.4rem; } } 

子组件代码

  
 
   
  
大类第{{item.classNum}}类{{ item.className }}
   
  <!----><!----><!---->【{{item.parentNum}}组】{{ item.groupName }} 
  /{{ item.number }} 
 @baseBlue: #0096ff; @com_gray1: #666; @com_gray2: #999; .search-text{ color: #52250a; background: #ffd930; font-size: .2rem; padding: .02rem; border-radius: 2px; vertical-align: top; margin-right: .04rem; } .com_gray1 { color: @com_gray1; } .com_gray2 { color: @com_gray2; } .com_blue { color: @baseBlue; } /* 单个商家 */ .one_business { background: #fff; .business_img { width: 1.6rem; height: 1.6rem; padding: 0.4rem; float: left; img { width: 100%; height: 100%; } } .business_info { float: right; width: 7.4rem; height: 1.6rem; padding: 0.4rem .2rem .4rem 0; .business_name { font-size: .35rem; line-height: .45rem; vertical-align: top; h3 { width: 5rem; display: inline-block; /*span {*/ /*color: #52250a;*/ /*background: #ffd930;*/ /*font-size: .2rem;*/ /*padding: .02rem;*/ /*border-radius: 2px;*/ /*vertical-align: top;*/ /*margin-right: .04rem;*/ /*}*/ } .bzp { width: .3rem; height: .3rem; font-size: .26rem; text-align: center; line-height: .3rem; display: inline-block; color: @com_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; } } 

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

以上就是Vue实现搜索结果高亮显示关键字的详细内容，更多请关注本站其它相关文章！