[vue] - v-html解決Vue.js渲染過程中html標(biāo)簽不能被解析

之前對(duì)接口遇到了接口數(shù)據(jù)中包含圖片或音頻的地址的格式,也就是圖文混排格式,所以封裝了字符串替換的方法。但是替換完之后就是下圖,html不能解析。


Paste_Image.png

封裝的圖文混排解析方法:

  strToUrl: function(str) {
    if (!str || typeof str != "string") return "";
    str = str.toString();
    return str.replace(/http:\/\/.*?\.(mp3|jpg|jpeg|png|gif)/ig, function (w) {
      if (/mp3$/i.test(w)) {
        return '<audio src="' + w + '"controls="/>'
      } else {
        return '![](' + w + ')'
      }
    })
  }

解決:

用v-html解析html標(biāo)簽<span v-html="item.name"></span>
不能使用<span>{{item.name}}</span>解析,{{}}只能解析字符串。


解決問題是看到的文檔,可以看一下。本項(xiàng)目使用的是vue2.0,所以實(shí)踐中{{{}}}并不可行。
http://blog.csdn.net/faryang/article/details/53011703

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,245評(píng)論 4 61
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,353評(píng)論 25 708
  • 2017.3.14 笑來老師這周倡導(dǎo)寫作,那就直接寫吧。不管有多差的起點(diǎn),總要開始。 先復(fù)盤一下最近因?yàn)榘严氲膶懗?..
    古靈精蓉兒閱讀 300評(píng)論 0 0
  • 小時(shí)候父母總會(huì)強(qiáng)逼著寫日記,當(dāng)時(shí)認(rèn)為是一種作業(yè)的負(fù)擔(dān)。然后寫的日記內(nèi)容往往就成了一天的review,甚至?xí)芯庉嫽?..
    Bjorn_DX閱讀 244評(píng)論 0 0
  • 1. 收到那封郵件的時(shí)候,子陌先是覺得詫異,后來覺得可笑,轉(zhuǎn)而巨大的傷感涌上心頭——他們終究,只有過去,再也不可能...
    香草紫蘇閱讀 670評(píng)論 3 4