场景:想要获取到的数据,以json的格式展示在页面中。
需要使用插件:vue-json-viewer
安装:npm install vue-json-viewer --save
在 Vue项目中main.js中引入
import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer)
在vue文件中直接使用
<json-viewer :value="jsonData" //指定的json数据,在data中声明定义 :expand-depth="5" copyable boxed sort ></json-viewer>
可配置项:
参数 | 说明 | 默认值 |
---|---|---|
value |
JSON 数据(支持与 v-model使用 ) |
Required |
expand-depth |
在此深度下,进一步下陷 |
1 |
copyable |
显示“复制”按钮,可以自定义复制文本只需设置{copy text:'copy',copiedText:'copied'}或设置为true使用默认的copyText | false |
sort |
显示前排序键 | false |
boxed |
为component组件添加一个奇特的“盒装”样式 | false |
theme |
添加自定义CSS类以创建主题 | jv-light |