vue json viewer,vue获取json数据并展示
这篇文章主要介绍了某视频剪辑软件之使用JsonView来展示数据树的实例代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前两天干活儿有个需求，在前端需要展示可折叠的数据树，供开发人员查看，这里采用JsonView组件来实现，它是一款用于展示数据的某视频剪辑软件组件，支持大体积的数据文件快速解析渲染，下面记录一下实现过程。
1.首先先下载好JsonView的组件：JsonView.vue，组件代码如下：
模板
div class=bgView
div :class=[json-view ，长度？可关闭： ]:style= font-size: fontSize px
span @ click=切换关闭:class=[ angle ，innerclosed？闭合": ]"v-if= length
/span
div class=内容包装
第一线
span v-if= JSON key class= JSON-key { { JSON key } } :/span
span v-if=长度
{ {前缀}}
{{innerclosed？(.子修复):“”}}
json-note
{{innerclosed？(//count: length) : }}
/span
/span
span v-if=！长度“{isArray？[] : {}}}/span
/p
div v-if=！内部封闭长度class=json-body
模板项目中的v-for=(项目，索引
JSON-view:closed= closed v-if= item。“is JSON”:key=“index”:JSON=“item。“价值”
:jsonKey= item。 key :is last= index===items。长度-1 /JSON-view
p class= JSON-item v-else:key= index
span class=json-key
{{(isArray？ 项。密钥 )} }
/span
：
json-value
{ {项目。值(索引===项。长度-1？ : ,)}}
/span
/p
/模板
span v-show=！内部封闭 class= body-line /span
/div
p v-if=！内部封闭长度最后一行
span{{subfix}}/span
/p
/div
/div
/div
/模板
脚本
导出默认值{
名称： jsonView ，
道具：{
JSON:[对象，数组],
jsonKey: {
类型：字符串，
默认值：""
},
已关闭：{
类型：布尔型，
默认值：错误
},
isLast: {
类型：布尔型，
默认值：真
},
fontSize: {
类型：数量，
默认值：13
}
},
已创建(){
this.innerclosed=this.closed
这个手表(关闭，()={
this.innerclosed=this.closed
})
},
data() {
返回{
内部封闭：真
}
},
方法：{
isObjectOrArray(源){
常量类型=对象。原型。托斯特林。呼叫(来源)
const RES=type===[对象数组] type===[对象对象]
返回资源
},
toggleClose() {
if (this.innerclosed) {
this.innerclosed=false
}否则{
this.innerclosed=true
}
}
},
计算值：{
isArray() {
返回对象。原型。托斯特林。打电话(这个。JSON)==[对象数组]
},
长度(){
把这个还回去。艾萨里？这个。JSON。长度：对象。钥匙(这个。JSON).长度
},
subfix() {
return (this.isArray？] : }) (this.isLast？ : ,)
},
前缀(){
把这个还回去。艾萨里？[ : {
},
项目(){
if (this.isArray) {
返回this.json.map(item={
const是JSON=this。isobjectorarray(项目)
返回{
值：isJSON？item : JSON.stringify(item)，
isJSON，
密钥：""
}
})
}
const json=this.json
返回Object.keys(json).地图(key={
const item=json[key]
const是JSON=this。isobjectorarray(项目)
返回{
值：isJSON？item : JSON.stringify(item)，
isJSON，
键
}
})
}
}
}
/脚本
风格。bgView {
背景色：# fafafa
}。json-view {
位置：相对；
显示：块；
宽度：100%;
身高：100%;
空白：nowrap
左填充：20px
框大小：边框-框；
}。json-note {
颜色：# 909399;
}。json-key {
颜色：rgb(147，98，15)；
}。json-value {
颜色：rgb(24，186，24)；
}。json-item {
边距：0;
左填充：20px
}。一线{
填充：0;
边距：0;
}。数据主体{
位置：相对；
填充：0;
边距：0;
}。json-body .正文行{
位置：绝对；
身高：100%;
宽度：0;
边框-左侧：虚线1px # bbb
top:0；
左：2px
}。最后一行
填充：0;
边距：0;
}。角度{
位置：绝对；
显示：块；
光标：指针；
浮动：左；
宽度：20px
文本对齐：居中；
左：0;
}。角度：在{
内容："";
显示：内嵌-块；
宽度：0;
高度：0;
垂直对齐：居中；
边框-顶部：纯色4px # 333
左边界：纯色6px透明；
右边框：纯色6px透明；
}。angle.closed:在{
边框-左侧：纯色4px # 333
边框顶部：纯色6px透明；
底部边框：纯色6px透明；
}
/风格
2.在需要使用的某视频剪辑软件页面中引用JsonView组件
从" @/components/JsonView "导入JsonView
3.定义数据数据变量
jsonData:{}，
4.页面展示代码
JSON视图：JSON= JSON数据/JSON视图
5.实现效果如下：
JsonViewAttributes
到此这篇关于某视频剪辑软件之使用JsonView来展示数据树的文章就介绍到这了，更多相关某视频剪辑软件使用JsonView展示数据树内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。