vue-json-viewer展示json格式代码数据详解

最为前端开发人员，项目中用到在浏览器以vscode和webstorm那样子的格式展现在浏览器的时候，如果没有现成的框架，让你去一点点搬砖，是花费大量时间，这里，我就遇到一个很好的组件拿来用，给大家参考，我觉得挺好用的，满足了项目需求，也节省了大量的代码编写时间，拿来就用 ，方便快捷，下面我就把我自己项目中用这个组件的步骤详细写下来，希望对你有帮助~

1.安装组件vue-json-viewer

// Vue2
npm install vue-json-viewer@2 --save
// Vue3
npm install vue-json-viewer@3 --save

2、在main.js（入口文件里面）中引入并使用vue-json-viewer

import JsonViewer from 'vue-json-viewer';
Vue.use(JsonViewer);

3、在.vue文件中使用vue-json-viewer

<json-viewer
        :value="resData"
        style="width: 100%; min-width: 3.125rem"
        :expand-depth="3"
        copyable
        boxed
        sort
    ></json-viewer>

在script 中

export default {
  name: "changelog",
  data() {
    return {
      //其中obj数据如果是JSON格式字符串，要先用JSON.parse()转成对象
      resData: {
        ss: "123",
        tt: 22,
        items: {
          dd: "33",
          rr: 0,
          aa:{
            b: {
              c:2
            }
          }
        }
      }
    }
  }
}

代码运行后的效果如下图：

创作不易，点赞收藏鼓励一下吧~~