在VueJS中渲染换行符

村村达蒙LEY2020-03-11

我正在创建一个便笺应用程序，用户可以在其中通过在文本区域中输入多行文本来添加便笺。当我将笔记保存在Firebase中时，笔记将以换行符（\ n）进行保存，这些字符我想将其可视化。

因此，我编写了一个过滤器，将这些字符替换为，<br />并且效果很好。
不过，现在我需要使用渲染数据{{{note.content}}}，用户可以注入将要执行的HTML，CSS和JS。
是否应该使用DOMPurify之类的内容来验证内容，还是可以安全地呈现换行符？

蛋蛋Tom2020/03/11 11:54:24

我可以使它与反引号一起使用（`）

<pre>{{textRenderedAsItIs}}</pre>

data():{
  return{
    textRenderedAsItIs:`Hello
                        World`
   }
}

路易Near番长2020/03/11 11:54:24

一个<pre>元素将预先在它服务的空白，如：

This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>

将导致：

This is followed by a newline, not that you can tell

You can see the newline after me!
Woohoo!

这样，您无需对换行符进行任何过滤。

西里小卤蛋2020/03/11 11:54:24

正如@shelvacu所说，<pre>html标记保留空白。

但是，使用它有一个严重的缺点：标签本身从项目中使用的CSS框架（例如Bootstrap）继承了大量不必要的样式。

要保留空格并避免继承任何不必要的样式，请使用：

<span style="white-space: pre;">Some whitespaced content</span>

会像<pre>标签一样异常地起作用。

请注意，该white-space: pre文本仍保持“原样”-如果您需要在必要时使用额外的换行符：white-space: pre-wrap。

GilTom2020/03/11 11:54:24

使用white-space: pre-line;CSS属性。

正如在Mozzila Doc中为pre-line价值所写：

空白序列被折叠。换行符在换行符处，在<br>，并且根据需要填充行框。

Newest Answer