json数据在页面中格式化展示

做项目时候，后端返回json数据要求前端在页面上展示格式化的数据，查了半天的资料，学到了

方法：
JSON.stringify(value, replacer, space)

• value：js对象
• replacer：替换对象，可以是一个方法、对象或数组，将value按照替换规则展示。
• space：填充参数，可以是数字或字符串，将value按照参数进行格式化展示。

this.showBizContent = JSON.stringify(content.context.bizContent, null, ' ')

我们在控制台中打印出来是这样的

image.png

但是我们在页面中直接展示的话

<div>{{ showBizContent }}</div>

但是在页面中展示，他还是一坨，根本不是json格式化后的数据
我们直接在里面添加'<pre>'就可以了

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

<div v-html="'<pre>'+showBizContent+'</pre>'"></div>

image.png

你看，页面中，数据展示出来的就是 json格式化的数据