vue json格式化展示

在前台我们需要展示一段json数据，希望能够格式化展示，能够自动的换行和装换符号。如下图

json格式化展示效果图

为展示此图，我们分情况讨论，分为前端接收的数据为json格式或string格式

判断数据格式

我们将数据在控制台打印或alert展示，如出现下图这种格式化后的情况则数据为json格式，可直接展示

打印数据

若打印数据为一行长串，则需要将数据格式化后展示

数据为json格式

上图数据，我直接放入<pre></pre>标签即可格式化显示

<pre>{{data}}</pre>

其他标签都不可以e

数据为String格式

如果数据不是json格式，我们则需要对数据进行格式化或使用json过滤器直接显示

this.jsonData= JSON.stringify(data, null, 4);

<span v-html="jsonData"></span>
<span> {{data | json}}</span>