2 回答

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
問(wèn)題不在于您的過(guò)濾器。這就是你實(shí)現(xiàn)它的方式。您需要使用Vue 文檔v-html中看到的指令,因?yàn)槟刖帉?xiě) html 而不是文本:
<span class="Name" v-html="$options.filters.splitRows(product.title)"/>
請(qǐng)注意,這是潛在的危險(xiǎn),因?yàn)樗试S XSS 攻擊。如果您編寫(xiě)的數(shù)據(jù)并非來(lái)自您本人(例如來(lái)自第 3 方 API 的數(shù)據(jù)或來(lái)自文本字段的數(shù)據(jù)),請(qǐng)采取安全措施去除惡意代碼。
如您所見(jiàn),沒(méi)有更多的管道。問(wèn)題是使用管道語(yǔ)法的過(guò)濾器不支持文本渲染以外的任何內(nèi)容。您仍然可以通過(guò)$options對(duì)象訪問(wèn)過(guò)濾器來(lái)使用它。
一種更優(yōu)雅的解決方法是使用計(jì)算屬性:
export default {
computed: {
productTitle() {
return this.$options.filters.splitRows(this.product.title)
}
}
}

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊
html 標(biāo)簽內(nèi)的值在 Vue.js 中將被視為字符串。這需要將標(biāo)簽綁定為html。
<span class="Name" v-html="product.title"></span>
由于過(guò)濾器在綁定部分無(wú)法正常工作,因此可以如下調(diào)用:
<span class="Name" v-html="$options.filters.splitRows(product.title)"></span>
添加回答
舉報(bào)