vue 里面使用 v-html 插入的文本不换行的问题解决

有时候遇到接口返回一串很长的字符串，里面有换行符需要在页面上直接展示出来。

<p>{{text}}</p>
//或
<p v-html="text"></p>

用上面这两种方式都无法让文本换行，因为 v-html 不识别换行符，但是可以识别标签。

解决方法：

1、添加样式

在使用 v-html 时添加样式，white-space:pre-wrap ,让浏览器保留空白和换行符。

<p v-html="text" style="white-space:pre-wrap"></p>

2、用 pre 标签包裹

被包围在 pre 标签中的文本通常会保留空格和换行符。

<pre><p v-html="text"></p></pre>

3、正则替换

用正则表达式把 \n 替换成
这样 v-html 就可以识别

<p v-html="text.replace(/\n/g,'
')"></p>