vue v-html 为什么无法解析后台传过来的 图文混排的内容 里面的标签解析不了

Question

内容<br /> <img alt="" src="/userfiles/1/images/DjCircleDetail/2018/09/2.jpg" style="width: 1024px; height: 724px;" /><br /> 的点点滴滴<br /> 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊<br /> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> <span style="font-weight: bolder;">项目拟建成物价值逾百亿</span></p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;联合置地的设立要追溯到2014年8月，彼时深高速与深圳国际签订了《关于合资成立梅林关城市更新项目公司的框架协议》，根据该协议，深高速与深圳国际全资子公司新通产共同出资成立了联合置地，双方分别持有49%和51%的股权。</p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;据深高速2018年半年报，联合置地目前主要业务为梅林关城市更新项目的开发。梅林关城市更新项目地块的土地面积约为9.6万平方米，土地用途为居住用地及商业用地，计容建筑面积总计约为48.64万平方米（含公共配套设施等）。</p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;并且，梅林关更新项目地块位置优越，其地价与周边土地的市场价格相比有一定优势，具有较好的投资价值和增值空间。此外，深高速还在此前公告中坦言，梅林关城市更新项目拟建成物业的市场评估价值逾百亿元，其经营管理状况将会对新通产和公司的财务状况和经营成果产生重大影响。因此，该项目受到市场的高度关注。</p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;值得一提的是，在今年2月份，深高速和新通产就已经同步对联合置地减资。深高速在公告中表示，鉴于梅林关更新项目的前期工作基本完成，正在按计划启动相关开发建设工作。为快速回收本集团投资资金，公司和新通产对联合置地进行同步减资，减资金额分别为22.05亿、22.95亿元。该次减资完成后，联合置地的注册资本由50亿元减至5亿元。</p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;减资后5个月，7月25日深高速公告称，为了增强联合置地在房地产开发、销售、管理、运营等方面的能力，以保证项目质量、降低项目风险、提升项目管理水平等。联合置地拟在现有基础上进行增资，通过在产权交易所公开挂牌、采用竞争性谈判方式进行评议，引入一名专业地产开发商作为战略投资者，挂牌底价不低于29亿元。</p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;<span style="font-weight: bolder;">万科携29亿元巨资加盟</span></p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;如今，这个新入战略投资者的人选终于尘埃落定，万科在竞争性谈判中胜出，成为深高速和联合置地梅林关城市更新项目的&ldquo;合伙人&rdquo;。</p> <p style="margin: 0px; padding: 0px; font-size: 16px; white-space: normal; color: rgb(102, 102, 102); font-family: &quot;5FAE8F6F96C59ED1&quot;, Helvetica, STHeiti, Droidsansfallback;"> &emsp;&emsp;据深高速9月28日晚公告，近日</p> <img alt="" src="/userfiles/1/images/DjCircleDetail/2018/09/v2-0819258826a3b8a16efab8c90694e9d5_r.jpg" style="width: 640px; height: 558px;" /><br />

上面是后台传过来的图文混排的数据
为什么 v-html 解析不了
jQuery的html() 也解析不了

Answer 1

不是解析不了图片，是根本找不到你的图片，你的图片链接的域名没有拼接上，图片前面没有域名那么就会在前端本地找文件

Answer 2

<div id="app">
      <div v-html="html"></div>
</div>

new Vue({
  el: "#app",
  data: {
      html: '<p><b>123&456</b></p&gt'
  },
  mounted () {
      this.html = this.HTMLEncode(this.html);
  },
  methods: {
      HTMLEncode: function(value) {
      var temp = document.createElement("div"); 
      temp.innerHTML = value; 
      var output = temp.innerText || temp.textContent; 
      temp = null; 
      return output;
    }
  }
})

Answer 3

额，不行么，我试了，可以啊

Answer 4

V-html 解析肯定是没有问题的
你把你问题描述清楚点 所有节点都渲染布出来 还是特殊部分不可以用

Answer 5

里面有被转义的字符