效果图:
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表示可以复制