首先看應用場景

這有一段文本內容，是項目的簡介，想要實現將文本中的關鍵詞進行變色處理

有如下關鍵詞

實現思路

遍歷文本內容，找到關鍵詞，并使用某種方法更改其字體樣式。經過搜尋資料決定采用v-html實現，但是v-html本身并不安全，有安全性風險且影響性能，所以謹慎使用。
想詳細了解的同學的同學可以看一下官網的介紹
uniapp官網v-htlml
vue官網v-html

實現代碼

//存儲結果
const introduction_content = ref('')
//定義函數
const updateColor = function (content: string) {let keywords = ['導師:', '關聯比賽:', '獲得成就:', '未來發展:', '獎金:']const result = ref(content) // 初始值為原始內容//本項目的需求是根據項目狀態動態變更顏色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.valueresult.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;">關聯比賽:</span>?建模
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">獎金:</span>?100