在Vue.js中显示未转义的HTML

如何在胡子绑定中解释HTML ?目前，break (<br />)只是被显示/转义。

Vue小应用:

var logapp = new Vue({
el: '#logapp',
data: {
title: 'Logs',
logs: [
{ status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  },
{ status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  }
]
}
})

这是模板:

<div id="logapp">
<table>
<tbody>
<tr v-repeat="logs">
<td>{{fail}}</td>
<td>{{type}}</td>
<td>{{description}}</td>
<td>{{stamp}}</td>
<td>{{id}}</td>
</tr>
</tbody>
</table>
</div>
220449 次浏览
小开

你可以在这里读到

如果你使用

\{\{<br />}}

它会逃脱的。如果你想要原始html，你必须使用

\{\{{<br />}}}

编辑(2017年2月5日):正如@hitautodestruct指出的那样，在vue 2你应该使用v-html而不是三花括号。

小开
最佳答案
你可以使用v-html指令来显示它。 这样的:< / p > 
<td v-html="desc"></td>
小开

从ve2开始，三大括号已弃用，您将使用v-html。

<div v-html="task.html_content"> </div>

从文档链接中不清楚我们应该在v-html中放置什么，你的变量应该放在v-html中。

同样，v-html只适用于<div>或<span>，而不适用于<template>。

如果你想在应用程序中看到这个，单击在这里。

小开

Vue默认附带v-html指令来显示它，您将它绑定到元素本身，而不是使用普通的字符串变量的moustache绑定。

对于你的具体例子，你需要:

<div id="logapp">
<table>
<tbody>
<tr v-repeat="logs">
<td v-html="fail"></td>
<td v-html="type"></td>
<td v-html="description"></td>
<td v-html="stamp"></td>
<td v-html="id"></td>
</tr>
</tbody>
</table>
</div>
小开

你必须使用v-html指令在vue组件中显示html内容

<div v-html="html content data property"></div>
小开

在使用v-html之前，你必须确保你转义的元素在你允许用户输入的情况下是干净的，否则你会将你的应用程序暴露在xss漏洞中。

更多信息:https://v2.vuejs.org/v2/guide/security.html

我强烈建议你不要使用v-html，而是使用这个npm包


提交答案