先上效果圖：
我們有多組關鍵詞，這里實現了關鍵詞的背景色與匹配值的字體顏色值相同
先擬定一組數據
colors: [ "#FFB5C5", "#EEC900", "#D1EEEE", "#40E0D0", "#FFFF00", "#FF7F00", "#FF6A6A", "#B3EE3A", "#9F79EE", "#FFC1C1" ], keywordsdetail: ["好看", "美麗", "wfewf"], comments: [ { text: "老師 好看好看222" }, { text: "老師美麗11111極了" }, { text: "老師太搞笑34234了" }, { text: "老師搞笑的不的了" }, { text: "老師:ox::beer:wfewf啊" } ]我們自定義一些顏色值以及關鍵詞和詳情文字
用內聯樣式的方法設置關鍵詞的不同背景色顯示
<span v-for="(item,index) in keywordsdetail" :key="index" class="keyworditem" :style="{backgroundColor:colors[index]}" @click="showpartkey(index,comments)" >{{item}}</span>下面定義關鍵詞匹配改變字體顏色的方法
changeColor(resultsList, keywords) { keywords.map((keyitem, keyindex) => { resultsList.map((item, index) => { if (keyitem && keyitem.length > 0) { // 匹配關鍵字正則 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>";
這里采取了字符串拼接的方法來進行渲染
但如果你寫成這樣
<span class="highlight">keyitem</span>
然后在css中定義highlight的樣式
.highlight {color:red}這樣做是不生效的
解釋我參考了這位兄弟說的
所以解決方法有以下幾種
1.直接去掉css的scoped屬性 但是這樣做很容易搞亂布局
2.寫成以下形式
.aaa >>>.highlight{color:red}3.把樣式以字符串拼接的方式插入
這樣做的好處是 可以動態設置v-html的樣式
總結
以上所述是小編給大家介紹的vue實現多組關鍵詞對應高亮顯示功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
