Vue中显示js格式插件vue-json-viewer

场景:想要获取到的数据,以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
原文地址:https://www.cnblogs.com/TestingShare/p/14336612.html