VUE展示JSON格式数据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>