vue项目实现搜索内容变红色显示

<ul class="content_box">
  <li class="content_item" v-for="(item, index) in contentListData" :key="index" @click="searchLinkDetails(item)">
    <div class="title" v-html="item.title"></div>
    <div class="content" v-html="item.originalContent"></div>
    <div class="time">{{item.publishTime}}</div>
  </li>
</ul>

searchValue: '', // 搜索文本
contentListData: []

// 获取列表的方法
    async getDataList() {
      let params = {
        websiteId: 4,
        content: this.searchValue,
        current: this.currentPage,
        size: 10,
        timeRange: this.searchTimeCheck,
        searchRange: this.searchScopeCheck
      }
      let res = await searchList(params)
      this.contentListData = res.data.records
      this.total = res.data.total
      // 核心处理方法开始-----------------------------------------------》
      if (this.searchValue && this.searchValue.length > 0) {
        const reg = `/${this.searchValue}/g`;
        this.contentListData.forEach((item) => {
          item.title = item.title.replace(
            eval(reg),
            "<span style='color: red;'>" + this.searchValue + "</span>"
          );
          if (item.originalContent) {
            item.originalContent = item.originalContent.replace(
              eval(reg),
              "<span style='color: red;'>" + this.searchValue + "</span>"
            );
          }
        });
      }
      // 核心处理方法结束------------------------------------------------》
    },

if (this.searchValue && this.searchValue.length > 0) {
    const reg = `/${this.searchValue}/g`;
    this.contentListData.forEach((item) => {
      item.title = item.title.replace(
        eval(reg),
        "<span style='color: red;'>" + this.searchValue + "</span>"
      );
      if (item.originalContent) {
        item.originalContent = item.originalContent.replace(
          eval(reg),
          "<span style='color: red;'>" + this.searchValue + "</span>"
        );
      }
    });
}