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

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

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

  • value:js对象
  • replacer:替换对象,可以是一个方法、对象或数组,将value按照替换规则展示。
  • space:填充参数,可以是数字或字符串,将value按照参数进行格式化展示。
this.showBizContent = JSON.stringify(content.context.bizContent, null, ' ')

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


image.png

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

{{ showBizContent }}

但是在页面中展示,他还是一坨,根本不是json格式化后的数据
我们直接在里面添加'

'就可以了

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

image.png

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

你可能感兴趣的:(json数据在页面中格式化展示)