【vue】工具向 - vue格式化json，使用插件json-viewer

官网地址：https://www.npmjs.com/package/vue-json-viewer

安装

npm:

npm install vue-json-viewer --save

yarn:

yarn add vue-json-viewer

在页面中引入

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'

// 以插件的形式引入
Vue.use(JsonViewer)
// 或者注册组件
// components: {JsonViewer}

在样式中使用

在template中插入

<json-viewer :value="jsonData"></json-viewer>

或者带参数

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

jsonData 是json数据

jsonData数据

new Vue({
  el: '#app',
  data() {
    return {
      jsonData: {
        total: 25,
        limit: 10,
        skip: 0,
        links: {
          previous: undefined,
          next: function () {},
        },
        data: [
          {
            id: '5968fcad629fa84ab65a5247',
            firstname: 'Ada',
            lastname: 'Lovelace',
            awards: null,
            known: [
              'mathematics',
              'computing'
            ],
            position: {
              lat: 44.563836,
              lng: 6.495139
            },
            bornAt: '1815-12-10T00:00:00.000Z',
            diedAt: '1852-11-27T00:00:00.000Z'
          }, {
            id: '5968fcad629fa84ab65a5246',
            firstname: 'Grace',
            lastname: 'Hopper',
            awards: [
              'Defense Distinguished Service Medal',
              'Legion of Merit',
              'Meritorious Service Medal',
              'American Campaign Medal',
            ],
            known: null,
            position: {
              lat: 43.614624,
              lng: 3.879995
            },
            bornAt: '1815-12-10T00:00:00.000Z',
            diedAt: '1852-11-27T00:00:00.000Z'
          }
        ]
      }
    }
  }
})

注意jsonData需要动态赋值

预览效果

参数解释

value - JSON 数据（也可使用v-model）
copyable - 显示复制按钮
sort - 显示之前对键进行排序
expanded - 默认展开视图
timeformat - 自定义时间格式功能