在前臺(tái)我們需要展示一段json數(shù)據(jù)缸兔，希望能夠格式化展示鲸匿，能夠自動(dòng)的換行和裝換符號(hào)。如下圖
json格式化展示效果圖
為展示此圖置济，我們分情況討論解恰，分為前端接收的數(shù)據(jù)為json格式或string格式
判斷數(shù)據(jù)格式
我們將數(shù)據(jù)在控制臺(tái)打印或alert展示，如出現(xiàn)下圖這種格式化后的情況則數(shù)據(jù)為json格式浙于，可直接展示
打印數(shù)據(jù)
若打印數(shù)據(jù)為一行長(zhǎng)串护盈，則需要將數(shù)據(jù)格式化后展示
數(shù)據(jù)為json格式
上圖數(shù)據(jù)，我直接放入<pre></pre>標(biāo)簽即可格式化顯示
<pre>{{data}}</pre>
其他標(biāo)簽都不可以e
數(shù)據(jù)為String格式
如果數(shù)據(jù)不是json格式羞酗，我們則需要對(duì)數(shù)據(jù)進(jìn)行格式化或使用json過濾器直接顯示
this.jsonData= JSON.stringify(data, null, 4);
<span v-html="jsonData"></span>
<span> {{data | json}}</span>
