VueJS将HTML打印到页面

问题描述：

我有一个属性，它包含一个HTML字符串作为其属性之一。VueJS将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>

答

按照docs：

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

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

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

阿里纳斯（同样来自文档）：

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

非常好，谢谢。是的内容输入和验证之前，它进入数据库，然后通过后端的Markdown分析器拉。它在Vue内到达之前被解析和构建:) –

答

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

3210

VueJS将HTML打印到页面

相关推荐