使用 Vue 在 p 标签内渲染 HTML

Question

所以我遇到了一些麻烦，想看看是否有人可以帮忙 - 是否可以在 .vue 文件的 ap 标签内呈现 HTML ？

这是 HTML 部分：

<div class="content" :id="post['GUID']" ref="snapshot">
  <p id="summary">{{ post['Summary'] }}</p>
</div>

我正在尝试将post['Summary']呈现为 HTML，但摘要以字符串格式显示为：

<div class="ExternalClass394D5102B42B4570882C28EA620584C8"><div style="font-family&#58;Calibri, Arial, Helvetica, sans-serif;font-size&#58;11pt;color&#58;rgb(0, 0, 0);"><span style="color&#58;black;">​<p style="margin&#58;0in;font-size&#58;12pt;font-family&#58;&quot;Times New Roman&quot;, serif;"><i><span style="font-family&#58;&quot;Whitney Medium&quot;;color&#58;black;">Upping Your Game!</span></i>

在 a.vue 文件中，如何在 p 中呈现 HTML 标记？

Answer 1

使用v-html指令绑定 HTML 变量：

<p id="summary" v-html="post['Summary']"></p>

 new Vue({ el: '#app', data: () => ({ post: { Summary: `<div class="ExternalClass394D5102B42B4570882C28EA620584C8"><div style="font-family&#58;Calibri, Arial, Helvetica, sans-serif;font-size&#58;11pt;color&#58;rgb(0, 0, 0);"><span style="color&#58;black;"><p style="margin&#58;0in;font-size&#58;12pt;font-family&#58;&quot;Times New Roman&quot;, serif;"><i><span style="font-family&#58;&quot;Whitney Medium&quot;;color&#58;black;">Upping Your Game,</span></i>` } }), })

 <script src="https://unpkg.com/vue@2.6.12"></script> <div id="app"> <p v-html="post.Summary"></p> </div>