VUE展示JSON格式数据vue-json-views使用
【代码】vue-json-views使用。
·
1.npm下载
npm i -S vue-json-views
2. 可选配置说明
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| json | 传入的json数据(必填) | Object | - |
| closed | 是否折叠全部 | Boolean | false |
| deep | 展开深度,越大渲染速度越慢,建议不超过5) | Number | 3 |
| icon-style | 折叠按钮样式,可选值为 [square, circle, triangle ] | String | square |
| icon-color | 两个折叠按钮的颜色 | Array | theme = vs-code 时,[’#c6c6c6’, ‘#c6c6c6’],其他情况为 [’#747983’, ‘#747983’] |
| theme | 可选主题样式,可选值为 [one-dark, vs-code], 不选时为默认的白色主题 | String | - |
| font-size | 字体大小,单位 px | Number | 14 |
| line-height | 行高,单位 px | Number | 24 |
3. 在 vue 中使用
<template>
<div>
<json-view :data="jsonData" deep="2" />
</div>
</template>
<script>
import jsonView from 'vue-json-views'
export default {
components: {
jsonView
},
data() {
return {
jsonData: {
name: "小明",
age: 18,
items3: {
like: "pingpang",
skip: 0,
},
},
}
},
};
</script>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)