TA貢獻1785條經驗 獲得超4個贊
您可以編寫自己的過濾器。
Vue.filter('wrapText', function (text) {
let a = text.split('%');
let str = '';
for (let x = 0; x < a.length; x++) {
str += a[x];
if (x % 2 == 0) {
if (x < a.length - 1)
str += '<b>';
}
else {
str += '</b>';
}
}
return str
});
TA貢獻1862條經驗 獲得超6個贊
我從未合作過，vue但我在過去 15 分鐘內讀了一點，我想我找到了解決方案。
您可以使用 javaScript 方法?？赡苡懈啙嵉姆椒▉韺崿F相同的結果。
重要的事實是將 vue 自定義過濾器與:inner-html.prop. 它看起來不是很“安全”，但如果你控制在那里插入什么 html，你應該沒問題。
所以在 html 中你可以做類似的事情 <span :inner-html.prop="text | wrapText"></span>
然后聲明您的過濾器。我讀到有兩種方法可以聲明它們：全局或組件內部，您選擇。
全球范圍內
Vue.filter('wrapText', function (value) {
const wordToWrap = value.substring(
value.indexOf("%")+1,
value.lastIndexOf("%")
)
const wrappedWord = `<b>${wordToWrap}</b>`
value = value.replace(wordToWrap, wrappedWord)
return value;
})
這應該有效。我讓它在 vue 操場上工作。干杯！
TA貢獻1765條經驗 獲得超5個贊
正則表達式就是這樣：D
編輯：“2.0 過濾器僅適用于 mustache 標簽和 v-bind。”
cfr: https://github.com/vuejs/vue/issues/4352
new Vue({
el: "#app",
data: {
text: 'Hello %John%. How are you doing %today%?'
},
filters: {
wrapText(str) {
return this.wrapText(str)
}
},
methods: {
wrapText(str) {
if (str.includes('%')) {
const reg = /(%[A-Za-z0-9]*%)/g
const newStr = str.replace(reg, '<b>$1</b>')
return newStr
}
return str
}
}
})
<div id="app">
<h2>This is a text</h2>
<p v-html="wrapText(text)">
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
這filter部分不再需要，但我還是把它留下了。
舉報