要在页面中显示美化JSON格式化

需求场景：有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。
俩种解决方法，第2种使用插件包比较方便。

解决方法1：

其实JSON.stringify本身就可以将JSON格式化，直接用法就是：

JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing

详细优化：

<template><div><pre id="result" ref="preRef" /></div></template>
// 在
<script>
export default {
  name:"Index",
  data(){reutrn{
 jsonData : {
            "msg": "success", "code": 200,"data": [{"id": 0, "door_name": "1",   },{"id": 1, "door_name": "2",   },], "count": 2
        };
}},
  mounted() {
    this.$refs.preRef.innerHTML = this.syntaxHighlight(this.jsonData)
  },
  methods: {
    syntaxHighlight(str) {
      if (typeof str !== 'string') {
        str = JSON.stringify(str, undefined, 2)
      }
      str = str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
      return str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
        var cls = 'number'
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key'
          } else {
            cls = 'string'
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean'
        } else if (/null/.test(match)) {
          cls = 'null'
        }
        return '<span class="' + cls + '">' + match + '</span>'
      })
    },
}
}
</script>
<style lang="scss" scoped>
    ::v-deep{
        #result {
            outline: 1px solid #ccc;
            padding: 5px;
            margin: 5px;
        }
        .string { color: green; }
        .number { color: darkorange; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: red; }
    }

</style>

效果展示：

image.png

解决方法2：安装vue-json-viewer插件

npm安装一下

npm install vue-json-viewer --save

代码实现，挂载vue里面

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
 
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)
// or 
// components: {JsonViewer}

在template里面加入如下一种： 其中jsonData必须是json类型的数据。

<json-viewer :value="jsonData"></json-viewer>
 
<hr />
 
<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort></json-viewer>

效果展示：

image.png