vue 模糊搜索框 实现 搜索的内容与下拉框相同文字高亮显示

使用正则表达式:

html

在上面的示例中,我们使用了一个方法 highlightText 来处理文字高亮。在模板中,我们使用 v-html 指令来渲染带有HTML标签的内容,从而将匹配的部分用 标签包裹起来,并添加 .highlight 类来设置文字颜色为蓝色。 无论使用过滤器还是正则表达式,你都可以根据实际需求来选择适合的方法来实现模糊搜索框中搜索内容与下拉框重复的文字变成蓝色。

在我的项目中模糊筛选用的时vue中的方法,我使用了他的插槽

 

在这个做了一点改变,将

 {{ item.address }} //改变为

这样就可以改变下拉框中每一行的代码样式,让他高亮显示。 


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部