使用 Vue 在 p 标签内渲染 HTML答案

【问题标题】：Render HTML inside p tag using Vue使用 Vue 在 p 标签内渲染 HTML
【发布时间】：2021-05-27 12:39:02
【问题描述】：

所以我遇到了一些麻烦，想看看是否有人可以帮忙 - 是否可以在 .vue 文件的 p 标签内呈现 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>

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

【问题讨论】：

这就是v-html存在的原因。它不安全，不应用于用户内容。数据从何而来的问题是未知的。

标签： javascript vue.js

【解决方案1】：

使用v-html directive绑定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>

【讨论】：

有没有办法只提取v-html中的
标签？
没有。为此，您必须自己解析 HTML。