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>

原文由 Dan Hanly 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

根据 文档：

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

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

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

旁注（也来自文档）：

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

原文由 Blue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在我们使用的是 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

原文由 webnoob 发布，翻译遵循 CC BY-SA 4.0 许可协议