树形格式化显示JSON数据

有时我们需要在页面上展示 json 数据，如果直接显示出来效果不太好。下面演示如何在 Vue.js 项目中创建一个专门的 Json 数据格式化组件，并使用它进行展示。

1，效果图

（1）JsonView 组件会自动对 JSON 数据进行格式化显示，同时具有语法高亮效果。

（2）同时点击节点头部的三角箭头，还可以对该节点进行展开、折叠操作。

2，组件代码（JsonView.vue）

<template>
  <div class="bgView">
    <div :class="['json-view', length ? 'closeable' : '']" :style="'font-size:' + fontSize+'px'">
    <span @click="toggleClose" :class="['angle', innerclosed ? 'closed' : '']" v-if="length">
    </span>
      <div class="content-wrap">
        <p class="first-line">
          <span v-if="jsonKey" class="json-key">"{
 {jsonKey}}": </span>
          <span v-if="length">
          {
 {prefix}}
          {
 {innerclosed ? ('...' + subfix) : ''}}
          <span  class="json-note">
           {
 {innerclosed ? (' // count: ' + length) : ''}}
          </span>
        </span>
          <span v-if="!length">{
 {isArray ? '[]' : '{}'}}</span>
        </p>
        <div v-if=&#