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，这已经略有改变。根据{{​​3}}，我们需要使用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...',
  }
}

这会产生：

docs

当loading状态更改为true

时

Answer 2

  

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

根据docs：

  

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

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

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

Sidenote（也来自文档）：

  

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

Answer 3

您可以使用v-html执行此操作。如docs中所述：

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

Tripple {{{不适用于vuejs 2。