vue如何實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示
更新時(shí)間：2023年10月11日 11:30:24 作者：暮 色
這篇文章主要介紹了vue如何實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示
先上效果圖：
我們有多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同
先擬定一組數(shù)據(jù)
colors: [
"#FFB5C5",
"#EEC900",
"#D1EEEE",
"#40E0D0",
"#FFFF00",
"#FF7F00",
"#FF6A6A",
"#B3EE3A",
"#9F79EE",
"#FFC1C1"
],
keywordsdetail: ["好看", "美麗", "wfewf"],
comments: [
{
text: "老師 好看好看222"
},
{
text: "老師美麗11111極了"
},
{
text: "老師太搞笑34234了"
},
{
text: "老師搞笑的不的了"
},
{
text: "老師??wfewf啊"
}
]我們自定義一些顏色值以及關(guān)鍵詞和詳情文字
用內(nèi)聯(lián)樣式的方法設(shè)置關(guān)鍵詞的不同背景色顯示
<span
v-for="(item,index) in keywordsdetail"
:key="index"
class="keyworditem"
:style="{backgroundColor:colors[index]}"
@click="showpartkey(index,comments)"
>{{item}}</span>下面定義關(guān)鍵詞匹配改變字體顏色的方法
changeColor(resultsList, keywords) {
keywords.map((keyitem, keyindex) => {
resultsList.map((item, index) => {
if (keyitem && keyitem.length > 0) {
// 匹配關(guān)鍵字正則
let replaceReg = new RegExp(keyitem, "g");
// 高亮替換v-html值
let replaceString =
'<span class="highlight"' +
' style="color: ' +
this.colors[keyindex] +
';">' +
keyitem +
"</span>";
resultsList[index].text = item.text.replace(
replaceReg,
replaceString
);
}
});
});
this.comments = [];
this.comments = resultsList;
}我們主要看這一行
let replaceString = '<span class="highlight"' +' style="color: ' + this.colors[keyindex] + ';">' + ?keyitem + "</span>";
這里采取了字符串拼接的方法來(lái)進(jìn)行渲染
但如果你寫成這樣
keyitem
然后在css中定義highlight的樣式
.highlight {
color:red
}這樣做是不生效的
解釋我參考了這位兄弟說(shuō)的
所以解決方法有以下幾種
1.直接去掉css的scoped屬性 但是這樣做很容易搞亂布局
2.寫成以下形式
.aaa >>>.highlight{
color:red
}3.把樣式以字符串拼接的方式插入
這樣做的好處是 可以動(dòng)態(tài)設(shè)置v-html的樣式
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作,結(jié)合具體實(shí)例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下2020-02-02
vue中 process.env與process.VUE_CLI_SERVICE詳解
這篇文章主要介紹了vue中process.env與process.VUE_CLI_SERVICE的相關(guān)資料,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue3中的h函數(shù)及使用小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過(guò)源碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
Electron+vue從零開始打造一個(gè)本地播放器的方法示例
這篇文章主要介紹了Electron+vue從零開始打造一個(gè)本地播放器的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
解決vue組件中使用v-for出現(xiàn)告警問題及v for指令介紹
這篇文章主要介紹了解決vue組件中使用v-for出現(xiàn)告警問題,在文中給大家介紹了v for指令，需要的朋友可以參考下2017-11-11
vue實(shí)現(xiàn)網(wǎng)易云音樂純界面
這篇文章主要為大家介紹了vue實(shí)現(xiàn)網(wǎng)易云音樂純界面過(guò)程詳解，附含詳細(xì)源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Element輸入框帶歷史查詢記錄的實(shí)現(xiàn)示例
這篇文章主要介紹了Element輸入框帶歷史查詢記錄的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了vue中的vendor.js文件過(guò)大問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08