Vue - 搜索关键字标红高亮（用户输入关键词搜索后，在搜索结果的列表标题上匹配并标红加粗）怎么使内容文本标红高亮的最详细教程，Nuxt.js uni-app 也适用，搜索功能及搜索结果关键字高亮源码

前言

这种需求多见于搜索结果，用户输入关键字点击搜索按钮后，底部出现一个列表，将搜索关键字匹配到列表上，并加粗标红等高亮处理。

本文提供了 在 vue2 / vue3 / nuxt 项目开发中，详细实现搜索关键字在列表标红功能，支持输入时动态变更效果，

您只需要复制粘贴再稍微改改便可完成，

---

您只需要提供要显示的列表（无需改变您的 HTML 结构），再调用一个函数即可自动完成 “标红”，

如下图所示，即便是 “动态改变” 关键字，也依然高效完成：

示例仅提供了核心功能，没有任何乱七八糟的样式和HTML，可根据您的需求自由扩展。

完整源码

推荐使用一键复制功能，避免漏选。

随便找个新页面，复制运行起来即可。