使用Vue-json-viewer插件展示json数据

效果图：

1、安装vue-json-viewer

npm i vue-json-viewer --save

2、引入

全局引入

//在main.js文件全局引入
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer) 

单页面引入

//在vue单页面文件中引入
<script>
    // 引入组件
    import JsonViewer from 'vue-json-viewer'
    export default {
       // 注册组件
       components:{
          JsonViewer
       },
    }
</script>

3、 使用插件

<json-viewer :value="value" copyable theme="my-awesome-json-theme"></json-viewer>

value代表显示的JSON数据，copyable表示可以复制

原文：https://aiguangyuan.blog.csdn.net/article/details/110958159?spm=1001.2014.3001.5506