第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在vue中用換行符分割字符串的問題

在vue中用換行符分割字符串的問題

猛跑小豬 2022-05-22 16:02:44
所以我試圖設(shè)置一個過濾器來用 a 替換一個連字符<br>來將它吐到一個新的行上。我創(chuàng)建了一個這樣的過濾器:filters: {  splitRows: function (value) {    if (!value) return ''    value = value.toString()    return value.replace('-', '</br>')  }}進而  <span class="Name">      {{ product.title | splitRows }}  </span>但是,這只是打印</br>而不是換行。我是 vue 新手,所以不確定我做錯了什么?
查看完整描述

2 回答

?
慕妹3242003

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)

    }

  }

}


查看完整回答
反對 回復(fù) 2022-05-22
?
蝴蝶刀刀

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>


查看完整回答
反對 回復(fù) 2022-05-22
  • 2 回答
  • 0 關(guān)注
  • 1038 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號