时间戳

首页 > 解决方案 > 如何防止 Svelte 在

标签？

json - 如何防止 Svelte 在
标签？

问题描述

如本 REPL中所示，在标签之间插入 JSON<pre>会导致错误。我的问题是，“这个错误是怎么回事？”，但后来我意识到单括号被 Svelte 视为可执行代码（duh），所以我不能像 HTML 一样对待它。

就是这么说的……</p>

我怎样才能获取这个内容，它可以作为原始 HTML 正常工作......</p> 

<pre>
{
  "num": 2,
    "obj": { "foo": "bar" }
}
</pre>

并保持回车符，使其呈现空白，就像这样↓？

{
  "num": 2,
    "obj": { "foo": "bar" }
}

注意：我的第一次尝试pre克服了错误，但在标签可以保护它之前清除了所有空白：

{"num":2,"obj":{"foo":"bar"}}

希望我在这里遗漏了一些非常简单的东西。

标签： jsonsveltepre

解决方案

这是我想到的三个选项。

代码块内的直接模板文字。

<pre>{`{
  num: 2,
  obj: { "foo": "bar" }
}`}
</pre>

在脚本部分声明的模板文字

<script>
    let json = `{
  num: 2,
  obj: { "foo": "bar" }
}`
</script>

<pre>{json}</pre>

JSON.stringify()

<pre>{JSON.stringify({ "num": 2, "obj": { "foo": "bar" }}, null, 2)}</pre>

REPL

另请参阅：使用 Svelte，如何在 HTML 中转义大括号？

推荐阅读