核心思想就是对从后台搜索获取到的数据进行二次加工处理,来达到想要的效果
<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>" ); } }); }