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，这略有改变。根据docs，我们需要使用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 来执行此操作。如docs中所说：

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

Triple {{{ 不适用于 vuejs 2。

Answer 3

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

根据docs：

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

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

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

旁注（也来自文档）：

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