Vue展示JSON格式数据

实现的效果：

image.png

1. 安装vue-json-viewer

npm install 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="dataList" copyable theme="my-awesome-json-theme"></json-viewer>

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

image.png