[英]Display unescaped HTML in Vue.js
How can I manage to get HTML interpreted inside a mustache binding?我怎样才能设法在小胡子绑定中解释 HTML? At the moment the break ( <br />
) is just displayed/escaped.目前休息( <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>
You can use the v-html
directive to show it.您可以使用v-html
指令来显示它。 like this:像这样:
<td v-html="desc"></td>
Starting with Vue2, the triple braces were deprecated, you are to use v-html
.从 Vue2 开始,三重大括号已被弃用,您将使用v-html
。
<div v-html="task.html_content"> </div>
It is unclear from the documentation link as to what we are supposed to place inside v-html
, your variables goes inside v-html
.从文档链接中不清楚我们应该在v-html
中放置什么,您的变量在v-html
中。
Also, v-html
works 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 .如果您想在应用程序中实时查看此内容,请单击此处。
You can read that here你可以在这里阅读
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-html instead of triple curly braces.编辑(2017 年 2 月 5 日):正如@hitautodestruct 指出的那样,在 vue 2 中,您应该使用v-html而不是三重花括号。
您必须使用 v-html 指令在 vue 组件中显示 html 内容
<div v-html="html content data property"></div>
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>
Before using v-html
, you have to make sure that the element which you escape is sanitized in case you allow user input, otherwise you expose your app to xss vulnerabilities.在使用v-html
之前,您必须确保在您允许用户输入的情况下对您转义的元素进行清理,否则您的应用程序将暴露于 xss 漏洞。
More info here: https://v2.vuejs.org/v2/guide/security.html更多信息: https ://v2.vuejs.org/v2/guide/security.html
I highly encourage you that instead of using v-html
to use this npm package我强烈建议你不要使用v-html
来使用这个npm 包
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.