Javascript VueJS换行符未正确呈现

我遇到以下问题，我从包含新行字符的API中读取数据字符串

\n

，并希望在模板中正确显示它们

但是当我做一些类似的事情时：

<p>{{ mytext }}</p>

{{mytext}

与普通文本一样，文本中显示有

\n

字符

响应中的文本字符串的格式为“你好，\n有什么事吗？\n我的名字是乔”

---

我在这里做错了什么？

我遇到了与我使用的

vue-nl2br相同的问题

检查一下

安装

npm install --save vue-nl2br

用法

import Nl2br from 'vue-nl2br'

Vue.component('nl2br', Nl2br)

查看

<nl2br tag="p" :text="`myLine1\nmyLine2`" />



结果:

<p>myLine1<br>myLine2</p>

myLine1
myLine2

使用


{{text}}
甚至不是vue问题，您可以简单地使用CSS并应用
空白：pre添加到内容。你不需要额外的软件包


newvue({
el:“#应用程序”，
数据：{
text:“Hello Vue。\n这是一行文本。\n另一行文本。\n”
}
})
。预格式化{
空白：预处理；
}

{{text}}
这是一种将字符串拆分为多个
元素的解决方案

我也使用i18n插件，我喜欢它，因为我不需要触摸CSS


newvue({
el:“#应用程序”，
数据：{
文字：[“你好，Vue.”，“这是一行文字”，“另一行文字”。”
}
})
。预格式化{
空白：预处理；
}

{{text}}
您可以尝试在
标记中包装
mytext
，或添加
空白：precss到您的
标签您是说OP必须下载、安装并使用一个软件包来显示新行？？是的，但不仅仅是显示它的转换/n标签到
对于该功能来说似乎太过分了是的，我同意：/！是的，这是一个有点“过度供电”，现在它的工作，也许我找到了一个更好的解决方案。如果是这样的话，我会把它贴在这里。不要为新用户链接到w3schools——这个网站有过时资料的历史。应该使用MDN文档，不幸的是，
标记会覆盖字体样式，因此这不是一个无CSS的解决方案
空白：预换行帮我搞定了！请注意，正如它看起来
一样，空白：分隔符做了一件非常类似的事情。事实上，我无法分辨。