在Vue.js中显示未转义的HTML
在Vue.js中显示未转义的HTML
提问于 2015-06-17 04:25:13
我怎样才能让HTML在一个小胡子绑定中被解释？此时，断点(<br />)只是显示/转义。
Small 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>回答 5
Stack Overflow用户
回答已采纳
发布于 2015-06-24 10:20:01
您可以使用指令v-html来显示它。如下所示：
<td v-html="desc"></td>Stack Overflow用户
发布于 2017-03-26 11:50:59
从Vue2开始，三花括号已被弃用，您将使用v-html。
<div v-html="task.html_content"> </div>
documentation link不清楚我们应该把什么放在v-html里面，你的变量放在v-html里面。
此外，v-html只能与<div>或<span>一起使用，而不能与<template>一起使用。
如果您想在应用程序中看到此过程，请单击here。
Stack Overflow用户
发布于 2018-08-26 04:34:18
默认情况下，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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30877491
复制相关文章
相似问题