前兩天遇到一個問題，需要將后端返回的一堆json數據格式化顯示在頁面上，剛開始覺得簡直so easy嘛，JSON.stringify 處理一下就好了啊，后面發現事情不妙，他們全都糅合在一起了，像一坨翔。。。
emm.....看來沒那么簡單，去問度娘咯，搜出來千篇一律的告訴我說JSON.stringify其實不止一個參數, 還可以加一個replace和space參數.以前真的沒有注意到過（就和parseInt不止一個參數一樣） (MDN原文地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
於是我按照文章中說的加上了參數：JSON.stringify(obj, null, 2), 這下子應該可以了吧，what！！！還是不行，和剛剛並沒有什么不同啊，我去，難道這個方法有問題，終於看到一篇文章中寫道說一般的html標簽會自動忽略換行和空格（如果有多個空格會合並成一個），專門有兩個標簽用於顯示代碼的，<pre></pre>和<code></code>,以前知道有這兩個標簽，但是從來沒用過，好吧，我把div換成了pre標簽，bingo~終於給換行了~
看起來好像可以了，但是仔細一看，沒有縮進啊，why？？？繼續翻看剛剛的文章，明明就和他們說的一樣啊，為什么別人的能正常顯示，我的就不行，難道是因為vue在渲染過程中給我做了什么處理嗎，嘗試了各種方式未果，終於在一篇文章中看到說要設置white-space樣式，病急亂投醫的我趕緊去看了這個樣式的官方文檔（https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space），看起來有點像啊，試着給pre標簽加上這個樣式吧，wow, It's perfect,請看效果圖：
總結，主要是以下三點：
1. html中用pre標簽或者code來顯示代碼。（它們的主要區別是瀏覽器會自動給code里面的內容加一些自己的樣式）
2. JSON.stringify()方法可以傳三個參數。(value[, replacer[, space]])
3. white-space的使用。（normal, nowrap, pre, pre-wrap, pre-line, break-space）
給自己的教訓，還是應該多了解一些用得少且容易被忽略的知識！！！