今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}。但是之后构建发现报错:

为此去官网上查了下资料,发现在vue2.0版本中,{{{}}}转换HTML的方式已经被废除,该版本中必须使用v-html标签进行转换,下面是具体的使用方法:

<span v-html="htmlData">
  {{htmlData}}
</span>

在这个DEMO中,htmlData所带的字符串将被转换为HTML代码。

注意:使用了v-html的标签中的内容将被htmlData替代:

<div v-html="htmlData">
  <p>这是第一个段落</p>
  {{htmlData}}
</div>

最后渲染的结果为:

<div>
  //htmlData中的内容
</div>

扫描二维码,在手机上阅读!