2 回答

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

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