Vue3使用v-html實現(xiàn)文本關鍵詞變色處理
更新時間：2024年06月26日 09:30:52 作者：劍亦未配妥
遍歷文本內容,找到關鍵詞,并使用某種方法更改其字體樣式,經(jīng)過搜尋資料決定采用v-html實現(xiàn),但是v-html本身并不安全,有安全性風險且影響性能,所以謹慎使用,本文給大家介紹了Vue3使用v-html實現(xiàn)文本關鍵詞變色處理,需要的朋友可以參考下
首先看應用場景
這有一段文本內容，是項目的簡介，想要實現(xiàn)將文本中的關鍵詞進行變色處理
有如下關鍵詞
實現(xiàn)思路
遍歷文本內容，找到關鍵詞，并使用某種方法更改其字體樣式。經(jīng)過搜尋資料決定采用v-html實現(xiàn)，但是v-html本身并不安全，有安全性風險且影響性能，所以謹慎使用。
想詳細了解的同學的同學可以看一下官網(wǎng)的介紹
實現(xiàn)代碼
//存儲結果
const introduction_content = ref('')
//定義函數(shù)
const updateColor = function (content: string) {
let keywords = ['導師:', '關聯(lián)比賽:', '獲得成就:', '未來發(fā)展:', '獎金:']
const result = ref(content) // 初始值為原始內容
//本項目的需求是根據(jù)項目狀態(tài)動態(tài)變更顏色
const color = ref(
detailData.value!.status == 0
? 'rgba(7, 193, 96, 1)'
: detailData.value!.status == 1
? 'rgba(250, 157, 59, 1)'
: detailData.value!.status == 2
? 'rgba(250, 81, 81, 0.5)'
: ''
)
// 遍歷每個關鍵詞并進行替換
keywords.forEach((keyword) => {
const regex = new RegExp(keyword, 'gi')
// 每次替換都基于當前的 result.value
result.value = result.value.replace(
regex,
`<span style="color: ${color.value};font-size:15px;">${keyword}</span>`
)
})
introduction_content.value = result.value
}
需要注意的是，如果需要更改字體大小，不能使用rpx等，需要使用px
可以輸出introduction_content看一下，結果如下
xx項目簡介 <span style="color: rgba(7, 193, 96, 1);font-size:15px;">導師:</span>?xxx <span style="color: rgba(7, 193, 96, 1);font-size:15px;">關聯(lián)比賽:</span>?建模 <span style="color: rgba(7, 193, 96, 1);font-size:15px;">獎金:</span>?100
到此這篇關于Vue3使用v-html實現(xiàn)文本關鍵詞變色處理的文章就介紹到這了,更多相關Vue3 v-html關鍵詞變色內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
接收一個輸入的手機號,判斷輸入的手機號是否正確是一個很常見的功能,這篇文章主要給大家介紹了關于前端Vue手機號校驗以及后端Java手機號校驗的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了詳解使用vue-cli腳手架初始化Vue項目下的項目結構，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue與Node.js通過socket.io通信的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
今天小編就為大家分享一篇解決vue-router 二級導航默認選中某一選項的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3頁面數(shù)據(jù)加載延遲的問題分析和解決方法
在?Vue?3?的項目中,當我們使用響應式數(shù)據(jù)（如?ref?或?computed）來管理頁面狀態(tài)時,可能會遇到由于接口數(shù)據(jù)加載延遲,導致頁面初始渲染時數(shù)據(jù)尚未獲取完成的問題,本文針對此問題簡單分析了原因和解決方法,需要的朋友可以參考下2024-11-11
開發(fā)中,需求是將內容展示作為一個組件,輸入為contentId,請求在組件中,只需根據(jù)父組件傳過來的contentId去請求內容的詳情即可,但是過程中卻發(fā)現(xiàn)一個問題,父組件調用子組件只執(zhí)行一次,所以本文就給大家介紹解決vue父組件調用子組件只執(zhí)行一次問題2023-09-09
這篇文章主要介紹了React和Vue中監(jiān)聽變量變化的方法,本文通過一個場景，父組件傳遞子組件一個A參數(shù)，子組件需要監(jiān)聽A參數(shù)的變化轉換為state，具體內容詳情大家跟隨小編一起通過本文學習吧2018-11-11
前端VUE3項目部署到linux服務器(CentOS?7)完整步驟
這篇文章主要介紹了前端VUE3項目部署到linux服務器(CentOS?7)的相關資料,包括項目打包、連接服務器、安裝和配置Nginx、上傳文件以及配置Nginx,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-01-01
Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數(shù)據(jù)綁定,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09