Javascript 如何在Vue中突出显示已过滤的文本

我正在做一个小项目，我需要通过一个对象数组进行筛选（实时搜索-键入时进行筛选）。我去掉了过滤部分，当用户在搜索框中键入时，它将动态打印包含该单词/短语的内容。我使用v-for，如下所示

       <div v-for="names in filteredNames":key="names">
          <p class="name-entry-item">{{names}}</p>
       </div>

---

谢谢您的帮助。

将找到的单词显示在标记栏中，并使用一个类突出显示找到的单词

计算：{
过滤器名称（）{
返回此.names.filter（搜索=>{
返回搜索
.toLowerCase（）
.includes（`this.searchNameInput.toLowerCase（）}`）；
});
}
}

创建一个函数，添加一个span和类，并使用v-html插入它

和强光功能

function highlightText(text) {
   return text.replaceAll(this.searchNameInput, `<span class="highlight">${this.searchNameInput}</span>`)
}

函数highlightText（文本）{
返回text.replaceAll（this.searchNameInput，`${this.searchNameInput}`）
}

用一个类将找到的单词显示到标记span中，该类将突出显示我以前尝试实现的found，这可能会让您有所了解。

function highlightText(text) {
   return text.replaceAll(this.searchNameInput, `<span class="highlight">${this.searchNameInput}</span>`)
}