最近開發(fā)vue2 項(xiàng)目 ，接口返回的是類似于這樣的數(shù)據(jù)：我是第一行的哦\n我是第二行的哦

我是直接這樣渲染的，

//html
<p v-html='text'></p>//渲染值
this.text = "我是第一行的哦\n我是第二行的哦"

但結(jié)果卻是不如意，變成了下面這樣

解決方法

1.在使用 v-html 時(shí)添加樣式，white-space:pre-wrap ,讓瀏覽器保留空白和換行符。

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

2、用 pre 標(biāo)簽包裹
被包圍在 pre 標(biāo)簽中的文本通常會保留空格和換行符。

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

3、正則替換
用正則表達(dá)式把 \n 替換成
這樣 v-html 就可以識別

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

我是用第二種方法解決的。

總結(jié)以防下次遇到，參考文章：https://www.jianshu.com/p/3719cd89c0bd