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

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

下面提供三种换行方式：

1.先使用正则将\n替换成

标签，再用v-html渲染

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

<div v-html="text"></div>

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

<div style="white-space: pre-wrap;">{{text}}</div>

3.使用pre标签

 标签可定义预格式化的文本，被包围在 
 标签 元素中的文本通常会保留空格和换行符

```
 
{{text}}
```
使用
标签 可以识别\n进行换行 但是不推荐使用

如果文字太长的一行可能会撑开固定宽度的容器或者超出容器范围
可以看一下white-space各种值的行为 对比一下pre和pre-wrap