vue項目實現(xiàn)搜索內容變紅色顯示

更新時間：2022年12月21日 10:13:09 作者：coderSlow

這篇文章主要為大家介紹了vue項目實現(xiàn)搜索內容變紅色顯示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1、經過二次處理后數(shù)據(jù)的使用

核心思想就是對從后臺搜索獲取到的數(shù)據(jù)進行二次加工處理，來達到想要的效果

<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>

2、data中要定義的數(shù)據(jù)參數(shù)

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

3、獲取列表數(shù)據(jù)并二次處理數(shù)據(jù)

// 獲取列表的方法
    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>"
            );
          }
        });
      }
      // 核心處理方法結束------------------------------------------------》
    },

總結核心代碼和具體效果如下

1、數(shù)據(jù)二次處理的核心方法

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>"
        );
      }
    });
}