Rendering unescaped HTML content in Vue.js
P粉253518620
2023-08-21 19:48:52
<p>How to parse HTML code in mustache binding? Currently newline characters (<code><br /></code>) will only be displayed/escaped. </p>
<p>Small Vue application:</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>The following is the template: </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>
Starting from Vue2, the three curly braces are deprecated, you need to use
v-html
.<div v-html="task.html_content"> </div>
It's not clear from the documentation link what we should put in
v-html
, your variables should be placed inv-html
.Also,
v-html
only works with<div>
or<span>
, not<template>
.If you want to see it live in the app, please click here.
You can use the
v-html
directive to display it. like this: