Vue.js中呈现未转义的HTML内容
P粉253518620
2023-08-21 19:48:52
<p>如何在mustache绑定中解析HTML代码？目前换行符(<code><br /></code>)只会被显示/转义。</p>
<p>小型Vue应用：</p>
<pre class="brush:php;toolbar:false;">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 }
]
}
})</pre>
<p>以下是模板：</p>
<pre class="brush:php;toolbar:false;"><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></pre></p>
从Vue2开始，三个大括号被弃用了，你需要使用
v-html。<div v-html="task.html_content"> </div>从文档链接中不清楚我们应该在
v-html中放置什么，你的变量应该放在v-html中。此外，
v-html只适用于<div>或<span>，而不适用于<template>。如果你想在应用中实时查看，请点击这里。
您可以使用
v-html指令来显示它。 像这样：