1 下载

  1. npm install vue-json-viewer

2 在main.js配置

// 展示json数据【高亮、可折叠、可复制】
import './plugins/json-viewer'

3 在src/plugins/jsonViewer.js配置

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
import 'vue-json-viewer/style.css'

Vue.use(JsonViewer)

4 示例

<template>
  <div class="test-json-viewer">
    <json-viewer
      :value="jsonData"
      :expand-depth="5"
      copyable
      boxed
      sort
    ></json-viewer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      jsonData: [
        {
          AGE: 22,
          BIRTHDAY: "1999-12-26",
          GENDER: 1
        },
        {
          AGE: 21,
          BIRTHDAY: "2000-12-6",
          GENDER: 2
        }
      ]
    };
  }
};
</script>

结果
image.png