有时候遇到接口返回一串很长的字符串,里面有换行符需要在页面上直接展示出来。
<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,'<br/>')"></p>