Vue中使用JsonView来展示Json树的实例代码

前两天干活儿有个需求,在前端需要展示可折叠的Json树,供开发人员查看,这里采用JsonView组件来实现,它是一款用于展示Json的Vue组件,支持大体积的Json文件快速解析渲染,下面记录一下实现过程。

1.首先先下载好JsonView的组件:JsonView.vue,组件代码如下:





2.在需要使用的vue页面中引用JsonView组件

import JsonView from '@/components/JsonView'

3.定义Json数据变量

jsonData:{},

4.页面展示代码

5.实现效果如下:

Vue中使用JsonView来展示Json树的实例代码_第1张图片

JsonViewAttributes

Vue中使用JsonView来展示Json树的实例代码_第2张图片

到此这篇关于Vue之使用JsonView来展示Json树的文章就介绍到这了,更多相关Vue使用JsonView展示Json树内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue中使用JsonView来展示Json树的实例代码)