1.先使用正则将\n替换成<br/>
标签,再用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标签
<pre>
标签可定义预格式化的文本,被包围在 <pre>
标签 元素中的文本通常会保留空格和换行符
<pre>{{text}}</pre>
使用<pre>
标签 可以识别\n进行换行 但是不推荐使用
如果文字太长的一行可能会撑开固定宽度的容器或者超出容器范围
可以看一下white-space各种值的行为 对比一下pre和pre-wrap