Javascript 在 Vue.js 中显示未转义的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30877491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display unescaped HTML in Vue.js
提问by Mike
How can I manage to get HTML interpreted inside a mustache binding? At the moment the break (<br />) is just displayed/escaped.
我怎样才能设法在胡子绑定中解释 HTML？目前，中断 ( <br />) 只是显示/转义。
Small Vue app:
小型 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 }
]
}
})
And here is the template:
这是模板：
<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>
回答by u5039782
You can use the directive v-html to show it. like this:
您可以使用指令 v-html 来显示它。像这样：
<td v-html="desc"></td>
回答by thewhitetulip
Starting with Vue2, the triple braces were deprecated, you are to use v-html.
从 Vue2 开始，三重大括号已被弃用，您将使用v-html.
<div v-html="task.html_content"> </div>
<div v-html="task.html_content"> </div>
It is unclear from the documentation linkas to what we are supposed to place inside v-html, your variables goes inside v-html.
从文档链接中不清楚我们应该在里面放什么v-html，你的变量在里面v-html。
Also, v-htmlworks only with <div>or <span>but not with <template>.
此外，v-html仅适用于<div>或<span>但不适用于<template>.
If you want to see this live in an app, click here.
如果您想在应用程序中实时查看此内容，请单击此处。
回答by zeratulmdq
If you use
如果你使用
{{<br />}}
it'll be escaped. If you want raw html, you gotta use
它会被逃脱。如果你想要原始 html，你必须使用
{{{<br />}}}
EDIT(Feb 5 2017): As @hitautodestruct points out, in vue 2 you should use v-htmlinstead of triple curly braces.
编辑（2017 年 2 月 5 日）：正如@hitautodestruct 指出的那样，在 vue 2 中，您应该使用v-html而不是三重花括号。
回答by zeratulmdq
Vue by default ships with the v-html directive to show it, you bind it onto the element itself rather than using the normal moustache binding for string variables.
Vue 默认附带 v-html 指令来显示它，你将它绑定到元素本身而不是使用普通的 mustache 绑定字符串变量。
So for your specific example you would need:
因此，对于您的具体示例，您需要：
<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>
回答by Shair Haider
You have to use v-html directive for displaying html content inside a vue component
您必须使用 v-html 指令在 vue 组件中显示 html 内容
<div v-html="html content data property"></div>
