HTML vue 识别文本中的\n 进行换行

在项目中碰到这样的情况，需要渲染文本域写入的内容，在编辑文本域时换行得到的文本就有了\n,如果直接渲染的话无法实现换行。

下面提供三种换行方式：

1.先使用正则将\n替换成
标签，再用v-html渲染

this.text = res.data.replace(/\n/g,'
')

2.通过css的white-space 实现，推荐使用

{{text}}

 3.使用pre标签

 标签可定义预格式化的文本，被包围在 
 标签 元素中的文本通常会保留空格和换行符 
 
{{text}}
 
使用
标签 可以识别\n进行换行 但是不推荐使用 
如果文字太长的一行可能会撑开固定宽度的容器或者超出容器范围
 
可以看一下white-space各种值的行为 对比一下pre和pre-wrap
（图片来源网络，侵删）
 
 
 
（图片来源网络，侵删）