欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示

 更新時(shí)間:2022年12月21日 10:13:09   作者:coderSlow  
這篇文章主要為大家介紹了vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

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

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

<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>"
            );
          }
        });
      }
      // 核心處理方法結(jié)束------------------------------------------------》
    },

總結(jié)核心代碼和具體效果如下

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

2、實(shí)現(xiàn)效果

以上就是vue項(xiàng)目實(shí)現(xiàn)搜索內(nèi)容變紅色顯示的詳細(xì)內(nèi)容,更多關(guān)于vue搜索內(nèi)容紅色顯示的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 解決Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題

    解決Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題

    這篇文章主要介紹了Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題,本文通過兩種手段防止運(yùn)營編輯時(shí)丟失數(shù)據(jù),具體內(nèi)容詳情,感興趣的朋友跟隨小編一起看看吧
    2019-11-11
  • 使用vue封裝一個(gè)自定義樣式的滾動(dòng)條

    使用vue封裝一個(gè)自定義樣式的滾動(dòng)條

    眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時(shí),瀏覽器會(huì)渲染出一個(gè)可以滾動(dòng)并用于顯示剩余界面的條 -- 滾動(dòng)條,它可以簡(jiǎn)單的樣式修改,但是位置是固定的,無法移動(dòng),而我們需要改變位置的時(shí)候,它就不能滿足我們的需求了,這時(shí)我們可以自己手寫一個(gè)
    2023-10-10
  • vue3遞歸組件封裝的全過程記錄

    vue3遞歸組件封裝的全過程記錄

    組件是可以在自己的模板中調(diào)用自身的,不過他們只能通過name選項(xiàng)來做這件事,下面這篇文章主要給大家介紹了關(guān)于vue3遞歸組件封裝的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法

    Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?

    前幾天在vue運(yùn)行項(xiàng)目過程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下
    2022-07-07
  • vue與django(drf)實(shí)現(xiàn)文件上傳下載功能全過程

    vue與django(drf)實(shí)現(xiàn)文件上傳下載功能全過程

    最近簡(jiǎn)單的學(xué)習(xí)了django和drf上傳文件(主要是圖片),做一個(gè)記錄,下面這篇文章主要給大家介紹了關(guān)于vue與django(drf)實(shí)現(xiàn)文件上傳下載功能的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法舉例

    Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法舉例

    我們?cè)陂_發(fā)vue的頁面的時(shí)候,有時(shí)候會(huì)遇到需要刷新當(dāng)前頁面功能,但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法,需要的朋友可以參考下
    2023-04-04
  • 解決vue?cli3使用axios跨域問題

    解決vue?cli3使用axios跨域問題

    這篇文章介紹了解決vue?cli3使用axios跨域問題,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-01-01
  • vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例

    vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法

    vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法

    這篇文章主要介紹了vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue?表格單選按鈕的實(shí)現(xiàn)方式

    vue?表格單選按鈕的實(shí)現(xiàn)方式

    這篇文章主要介紹了vue?表格單選按鈕的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07

最新評(píng)論