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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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-htmlonly 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-htmldirective to display it. like this: