做项目时候,后端返回json数据要求前端在页面上展示格式化的数据,查了半天的资料,学到了
方法:
JSON.stringify(value, replacer, space)
- value:js对象
- replacer:替换对象,可以是一个方法、对象或数组,将value按照替换规则展示。
- space:填充参数,可以是数字或字符串,将value按照参数进行格式化展示。
this.showBizContent = JSON.stringify(content.context.bizContent, null, ' ')
我们在控制台中打印出来是这样的
但是我们在页面中直接展示的话
<div>{{ showBizContent }}</div>
但是在页面中展示,他还是一坨,根本不是json格式化后的数据
我们直接在里面添加'<pre>'就可以了
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<div v-html="'<pre>'+showBizContent+'</pre>'"></div>
你看,页面中,数据展示出来的就是 json格式化的数据