原本可以使用<pre>标签+JSON.stringfy()函数解决json格式化显示的问题,但是数据量过大希望可以像jsonviewer一样能够伸缩,所以使用了vue-json-viewer插件,mark如下:
1、安装
$ npm install vue-json-viewer --save
2、使用
<json-viewer :value="jsonData"></json-viewer>
<hr />
<json-viewer
:value="jsonData"
:expand-depth=5
copyable
boxed
sort></json-viewer>
import Vue from 'vue'
import JsonViewer from '../lib'
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)
new Vue({
el: '#app',
data() {
return {
jsonData: {
total: 25,
limit: 10,
skip: 0,
links: {
previous: undefined,
next: function () {},
}
}
}
}
});
3、效果
4、属性