在 Vue.js 中显示未转义的 HTML
我怎样才能设法在 mustache 绑定中解释 HTML？目前，中断 (<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>
您可以使用 v-html 指令来显示它。像这样：
<td v-html="desc"></td>
从 Vue2 开始，三重大括号已被弃用，您将使用 v-html。
<div v-html="task.html_content"> </div>
从 documentation link 不清楚我们应该在 v-html 中放置什么，您的变量放在 v-html 中。
此外，v-html 仅适用于 <div> 或 <span>，但不适用于 <template>。
如果您想在应用程序中实时查看此内容，请点击 here。
<ng-include> 的内容，“但不是 <template>”是这里的重要部分
如果你使用
{{<br />}}
它会被逃脱。如果你想要原始 html，你必须使用
{{{<br />}}}
编辑（2017 年 2 月 5 日）：正如 @hitautodestruct 指出的那样，在 vue 2 中，您应该使用 v-html 而不是三重花括号。
您必须使用 v-html 指令在 vue 组件中显示 html 内容
<div v-html="html content data property"></div>
默认情况下，Vue 附带 v-html 指令来显示它，您将它绑定到元素本身，而不是对字符串变量使用普通的 mustache 绑定。
因此，对于您的具体示例，您需要：
<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 之前，您必须确保在您允许用户输入的情况下对您转义的元素进行清理，否则您的应用程序将面临 xss 漏洞。
更多信息：https://v2.vuejs.org/v2/guide/security.html
我强烈建议您不要使用 v-html 来使用此 npm package
关注公众号
不定期副业成功案例分享
