vue 显示json,vue根据json生成表单
这篇文章主要介绍了某视频剪辑软件如何实现数据格式数据展示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
Json格式数据展示某视频剪辑软件解析数据数据
Json格式数据展示
某视频剪辑软件的jsonViewer组件也很好用，在网上看到有大神自己写的组件（递归调用),觉得很好，稍作修改，记录一下
JSON.stringify(obj，null，4)
可以美化数据数据的显示
光要高亮的内容/span在数据数据中，如果有需要高亮的内容，用以上标签包起来（这个要处理数据实现了，组件里高亮样式可以根据需要自己修改)
模板
div class=bgView
div :class=[json-view ，长度？可关闭： ]:style= font-size: fontSize px
span @ click=切换关闭:class=[ angle ，innerclosed？closed : ] v-if=length/span
div class=内容包装
第一线
span v-if= JSON key class= JSON-key { { JSON key } } :/span
span v-if= length @ click=切换关闭 style= cursor:pointer；
{ {前缀}}
{{innerclosed？(. 子修复):“”}}
！ json-note
{{innerclosed？(//count: length) : }}
/span -
/span
span v-if=！长度“{isArray？[] : {}}}/span
/p
div v-if=！内部封闭长度class=json-body
模板项目中的v-for=(项目，索引
json-view v-if=item.isJSON
:closed=closed
:key=index
:json=item.value
:jsonKey=item.key
：深度=深度1
:expandDepth=expandDepth
:is last= index===items。长度-1 /JSON-view
p v-else class= JSON-item :key= index
span class=json-key
{{(isArray？ 项。按键 :)} }
/span
v-html= item。值(索引===项。长度-1？ : ,)/
/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
},
扩展深度：{
类型：数量，
默认值：0
},
深度：{
类型：数量，
默认值：0
}
},
已创建(){
this.innerclosed=！这个。关了？这个。关闭：这个。深度=这个。扩展深度
这个手表(关闭，()={
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 {
背景色：# efefef
font-family:NotoSansCJKkr；
}。json-view {
位置：相对；
显示：块；
宽度：100%;
身高：100%;
/*空白：nowrap*/
填充：0 20像素
框大小：边框-框；
行高：30px
}。json-note {
颜色：# 909399;
}。json-key {
颜色：# 333333;
}。json-value {
颜色：# 333333;
}。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透明；
}。光{
颜色：# 0595ff
}
/风格
vue解析json数据
在前端接授到数据后，使用解析(jsonObject)就可以解析！(jsonObject为数据对象)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。