VueJS将HTML打印到页面 [英] VueJS Print HTML to Page

问题描述

我有一个属性，它包含一个HTML字符串作为它的一个属性。

当我尝试将这些内容打印到模板中的页面时，它实际上会打印HTML。所以文本包含HTML标签，并且它本身不被浏览器解释为HTML。

我该如何解决这个问题？

Template：

 < div class =description> 
 {{property.description}} 
< / div> 
  

输出：

 < p> Suscipit est aut molestiae provident quis magnam。< / p> < p> Nesciunt iure impedit sint iste。< / p> < p> Aspernatur repudiandae laborum dolor harum magnam officiis ad nihil。< / p> < p>非商业推广adipisci voluptates est eos et。< / p> 
  

解决方案

注意：此答案适用于vue.js v1。对于v2，请参阅webnoob的答案此处。

根据文档 a>：

双胡须将数据解释为纯文本而不是HTML。为了输出真实的HTML，您需要使用三重胡须。

使用3个大括号来完成您的任务：

 < div class =description> 
 {{{property.description}}} 
< / div> 
  

旁注（同样来自文档）：

< blockquote>

在您的网站上动态呈现任意HTML可能会非常危险，因为它很容易导致XSS攻击。只在受信任的内容上使用HTML插值，而不能在用户提供的内容上使用。

I have a property which contains a HTML string as one of its attributes.

When I try and print this to the page within my template, it actually prints the HTML. So the text contains HTML tags, and it itself is not interpreted as HTML by the browser.

How can I fix this?

Template:

<div class="description">
    {{ property.description }}
</div>

Output:

<p>Suscipit est aut molestiae provident quis magnam.</p> <p>Nesciunt iure impedit sint iste.</p> <p>Aspernatur repudiandae laborum dolor harum magnam officiis ad nihil.</p> <p>Non deserunt rerum adipisci voluptates est eos et.</p> 

解决方案

NOTE: This answer was intended for vue.js v1. For v2, please see webnoob's answer here.

According to the docs:

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use triple mustaches.

Use 3 curly brackets to accomplish your task:

<div class="description">
    {{{ property.description }}}
</div>

Sidenote (Also from the docs):

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use HTML interpolation on trusted content and never on user-provided content.

这篇关于VueJS将HTML打印到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！