在前台我们需要展示一段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>