vue展示json数据，vue-json-viewer的使用

一、安装

 yarn add vue-json-viewer

二、引入项目

src目录下plugins下的jsonViewer.js文件

import Vue from "vue";
import JsonViewer from "vue-json-viewer";
Vue.use(JsonViewer);

在 main.js文件 中引入

import "./plugins/jsonViewer.js";

三、在组件中使用

test.vue文件

<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>

效果如图：

更多使用，参考：vue-json-viewer