关于Vue 中v-html 失效的原因

最新推荐文章于 2024-02-23 15:22:15 发布

chengsu1902

最新推荐文章于 2024-02-23 15:22:15 发布

阅读量4.3k

点赞数 3

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1031097/blog/1836793

版权

众所周知，Vue.js现在越来越火，在实际中遇到：

已知：

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

使用{{{}}}解析之后

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

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

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

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

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

style="white-space:pre-wrap"

然后就能正常解析了，好神奇的感觉，查一下这个属性

转载于:https://my.oschina.net/u/1031097/blog/1836793

优惠劵

关注关注