关于Vue 中v-html 失效的缘由

时间 2019-11-08

标签关于 vue html 失效缘由栏目 HTML 繁體版

原文原文链接

众所周知，Vue.js如今愈来愈火，在实际中遇到：html

已知：工具

user.data=&lt;p&gt;请在输入框内贴入你须要转换的HTML代码&lt;/p&gt; 
&lt;br&gt;&lt;p&gt;HTML转换工具，能够将HTML代码转换为HTML转义字符串&lt;/p&gt;

使用{{{}}}解析以后spa

{{{user.data}}}=&lt;p&gt;请在输入框内贴入你须要转换的HTML代码&lt;/p&gt; &lt;br&gt;&lt;p&gt;HTML转换工具，能够将HTML代码转换为HTML转义字符串&lt;/p&gt;

查官方文档，{{{}}}已经被v-html替代，遂尝试code

v-html="user.data"
<p>请在输入框内贴入你须要转换的HTML代码</p> <br><p>HTML转换工具，能够将HTML代码转换为HTML转义字符串</p>

确实为转译事后的html片断，可是在包裹标签上添加 v-html="user.data",却只是将转意解析为html 代码,好头疼，怎么办。htm

后来咨询大神，大神说：给包裹标签加样式文档

style="white-space:pre-wrap"

而后就能正常解析了，好神奇的感受，查一下这个属性字符串