时间戳

首页 > 解决方案 > 如何在不呈现 HTML 本身的情况下引用 HTML 片段？

html - 如何在不呈现 HTML 本身的情况下引用 HTML 片段？

问题描述

我遇到了一些奇怪的行为。我有一个 VueJS 应用程序，我试图在其中引用网站上正在使用的一些 HTML。我想像这样渲染它：

<h2>
  {{ pomodoro.longBreak }}
</h2>

我已经将它包装在<code>标签中，标签中的那些<pre>，并用 HTML 实体替换了尖括号和花括号，如下所示：

<pre>
  <code>
&lt;h1&gt;
  &lbrace;&lbrace; pomodoro.longBreak &rbrace;&rbrace;
&lt;/h1&gt;
  </code>
</pre>

这导致：

<h2>
  15
</h2>

其中“15”是 的值pomodoro.longBreak。我不希望呈现值，只呈现原始 HTML。&lbrace如果我在and对之间放置一个空格&rbrace，我会得到：

<h2>
  { { pomodoro.longBreak } }
</h2>

这非常接近我想要的，但我希望能够在实际输入时显示它。

有没有唯一的 HTML 解决方案？

标签： htmlvue.js

解决方案

推荐阅读