Javascript 在VueJS中呈现换行符

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

因此，我编写了一个过滤器，用

替换这些字符，效果很好。

<span style="white-space: pre-line">Your Content</span>

不过，现在我需要使用

{{{{{note.content}}}

呈现数据，用户可以插入将要执行的HTML、CSS和JS。
我应该使用类似的方法来验证内容，还是有办法安全地呈现换行符？

将内容包装在

pre

元素中。 A

这样，您就不需要对换行符进行任何过滤。
在实际描述了我的问题后，我想到了使用预标记的想法，该标记用于预格式化文本。此标记将尊重“\t\n”字符，并在开箱即用的情况下正确呈现文本！
虽然句子不会自动断开，并溢出宽度。
使用一些CSS，我能够获得与其他元素相同的行为

html:
正如@shelvavau所说的，
html标记保留空白

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

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

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

if (this.content.my_val && this.content.my_val !== '') {
    return this.content.my_val.replace(/\n/g, '<br />')
}

一些空白内容

什么会像
标签那样起作用

I am big line with lots and lots of text which would make me not fit.

Line two ✌ 
Line three

请注意，
空白：pre
保持文本“原样”——如果您希望在必要时使用额外的换行符：
空白：pre-wrap

请参阅：
我能够使用反勾号（`）使其工作

使用
空白：前置行CSS属性

作为
前置行
值的写入：

空格序列被折叠。换行时换行
字符，位于

，并根据需要填充行框

将\n转换为

if（this.content.my_val&&this.content.my_val！=''）{
返回此.content.my_val.replace（/\n/g，
）
}
希望这能为新访客增加价值

来自用户的输入。

输出的最佳方法
您的内容


其他方法的问题
您的内容

将导致在y轴上添加一个滚动条

参考资料和更多详细信息：
我自己也发现了这一点，谢谢！我接受你的回答非常聪明，以前从未遇到过这个想法。你也可以使用css属性，它有更多的选项非常适合我。我没有使用任何css框架，所以我没有遇到这个问题。尽管如此，这真的很有帮助，谢谢！对我来说，这是更好的答案，因为在大多数css框架中，用标签包装往往会改变字体。这真的救了我。谢谢@Krzysiek。谢谢分享！
data():{
  return{
    textRenderedAsItIs:`Hello
                        World`
   }
}

if (this.content.my_val && this.content.my_val !== '') {
    return this.content.my_val.replace(/\n/g, '<br />')
}

I am big line with lots and lots of text which would make me not fit.

Line two ✌ 
Line three

<span style="white-space: pre-line">Your Content</span>

<span style="white-space: pre">Your Content</span>