VueJS 将 HTML 打印到页面

2023-12-21

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

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

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

模板:

<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> 

现在我们使用Vue2,这已经略有改变。根据docs https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML我们需要利用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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VueJS 将 HTML 打印到页面 的相关文章

随机推荐