VueJS将HTML打印到页面

Question

我有一个属性,其中包含HTML字符串作为其属性之一.

当我尝试将其打印到模板中的页面时,它实际上会打印HTML.因此,文本包含HTML标记,并且浏览器本身不会将其解释为HTML.

我怎样才能解决这个问题？

模板:

<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>Non deserunt rerum adipisci voluptates est eos et.</p> 

Answer 1

现在我们正在使用Vue2,这已经略有改变.根据文档,我们需要使用该v-html指令.

举个例子,我做了一个像这样的加载按钮:

<button type="submit" v-html="loading ? loadingText : 'Login'">

变量代表的地方:

data: function (router) {
  return {
    loading: false,
    loadingText: '<i class="fa fa-spinner fa-spin"></i> Loading...',
  }
}

这会产生:

当loading州改为true

Answer 2

你可以使用 v-html 来做到这一点。正如文档中所说：

<div class="description" v-html="property.description"></div>

Tripple {{{ 不适用于 vuejs 2。

Answer 3

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

根据文档：

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

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

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

旁注（也来自文档）：

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