我試圖根據條件更改我的 vue 應用程式中 String 的字體顏色。但是，到目前為止我發現的解決方案改變了整個文本的顏色。我只想改變特定的部分。例如：
const exampleString= 'Yesterday I was ACTIVITY with FRIEND who I first met in PLACE'
大寫字母的單詞應為紅色，其余為黑色。所以像“如果三個后續字符是大寫字母而不是紅色直到空白”這樣的條件。有沒有辦法實作這個？
uj5u.com熱心網友回復：
如果你問如何用 Vue 做到這一點，你可以嘗試v-html：
new Vue({
el: "#demo",
data() {
return {
text: "Yesterday I was ACTIVITY with FRIEND who I first met in PLACE"
}
},
computed: {
setText() {
return this.text.replace(/[A-Z&]/g, m => `<span style="color: red;">${m}</span>`)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-html="setText"></div>
</div>uj5u.com熱心網友回復：
是的，你可以做到。您可以簡單地遍歷您的內容并添加一個條件，即單詞中的所有字母都應具有適當ascii的大寫字母值，如果通過此檢查，您可以在span標簽中指定顏色。這是一個純 JavaScript 示例：
var para = document.getElementById("para").innerHTML;
var resultPara = "";
var words = para.split(" ");
for (var word of words) {
var capitalLetterCount = 0;
for (var letter of word) {
if (letter.charCodeAt(0) >= 65 && letter.charCodeAt(0) <= 90)
capitalLetterCount ;
else
break;
}
if (capitalLetterCount != 0 && capitalLetterCount === word.length)
resultPara = ' <span style="color: red">' word '</span>';
else
resultPara = ' ' word;
}
document.getElementById("para").innerHTML = resultPara;<div id="para">Yesterday I was ACTIVITY with FRIEND who I first met in PLACE</div>uj5u.com熱心網友回復：
我不使用 Vue，但您可以簡單地插入<span>帶有行內樣式的必要s，例如；
var str = 'Yesterday I was ACTIVITY with FRIEND who I first met in PLACE',
rgx = new RegExp("[A-Z]{2,}","g"),
res = str.replace(rgx, s => `<span style="color:red;">${s}</span>`);
console.log(res);轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/379742.html
標籤：javascript 细绳 Vue.js if 语句 字体
上一篇：密碼錯誤兩次如何恢復原狀