vue如何實(shí)現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示
更新時(shí)間：2023年10月11日 11:30:24 作者：暮 色
這篇文章主要介紹了vue如何實(shí)現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue實(shí)現(xiàn)多組關(guān)鍵詞對應(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>";
這里采取了字符串拼接的方法來進(jìn)行渲染
但如果你寫成這樣
keyitem
然后在css中定義highlight的樣式
.highlight {
color:red
}這樣做是不生效的
解釋我參考了這位兄弟說的
所以解決方法有以下幾種
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)文章
手摸手教你實(shí)現(xiàn)Vue3 Reactivity
本文主要介紹了手摸手教你實(shí)現(xiàn)Vue3 Reactivity，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vuex中的Mutation使用詳解,當(dāng)我們想修改狀態(tài)值,想傳入的值進(jìn)而進(jìn)行修改時(shí),你可以向 store.commit 傳入額外的參數(shù),即 mutation 的 載荷,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vuex及其使用方法，感興趣的同學(xué)，可以參考下2021-04-04
vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼
本篇文章主要介紹了vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了Vue中的computed屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue3中如何使用v-model高級用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級用法參數(shù)綁定傳值的相關(guān)知識,包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)
這篇文章主要介紹了vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)，詳細(xì)的介紹了整個(gè)項(xiàng)目的目錄以及目錄文件的用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
100行代碼實(shí)現(xiàn)vue表單校驗(yàn)功能(小白自編)
這篇文章主要介紹了使用100行代碼實(shí)現(xiàn)vue表單校驗(yàn)功能，本文通過實(shí)例截圖給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家介紹了vue實(shí)現(xiàn)At人文本輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09