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