v-html 中的 Vue.js <pre> 标签

Question

我在 v-html 元素中显示来自 ajax 的内容。内容包含一个“pre”标签，我想按原样显示。

成分 ：

<div v-html="content"></div>

内容示例：

<h1>Title</h1>
<pre>
    <p>Hello</p>
</pre>

我得到了什么：

标题

你好

我想得到什么：

标题

<p>Hello</p>

有没有办法实现这一目标？或者 v-html 是不可能的？

编辑 ：

我从表单（所见即所得）创建内容。在保存内容之前，它是用 he.js 编码的，所以它看起来像：

<h1>Title</h1>
<pre>
<p>Hello</p>
</pre>

使用我的 ajax 函数获取后，我使用 he.js 对其进行编码以获取：

<h1>Title</h1>
<pre>
    <p>Hello</p>
</pre>

Answer 1

尝试使用以下内容：

<h1>Title</h1>
<pre>
    &lt;p>Hello&lt;/p>
</pre>

因此，您要么必须转义标签，要么将pre标签的内容与 HTML 内容的其余部分分开。

我个人会做类似的事情：

<div>
<h1>{{content.title}}</h1>
<pre>
    {{content.code}}
</pre>
</div>

在你的data你会有这个content对象：

content: {
 title: 'Title',
 code: '<p>Hello</p>'
}

但我不知道您的确切用例以及您内容的 HTML 结构是否可以更改。