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

Question

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

组件:

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

内容示例:

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

我得到的:

Title

Hello

我想得到什么:

Title

<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 结构是否可以更改。