一、安装插件

npm install vue-json-viewer --save

二、组件中引入

<script>
import JsonViewer from 'vue-json-viewer'
export default {
  components:{
    JsonViewer
  }
}
</script>

三、示例

<template>
	<div class="testBox">
       <div class="box">{{testJson}}</div>  //json数据
       <div class="box">
         <json-viewer :value="testJson"></json-viewer>  //格式化json
       </div>
 	</div>
</template>

<script>
export default {
  data() {
    return {
      testJson:{
        cityAll:'全国城市大全',
        number:10,
        cityList:[
          {
            name:'北京'
          },
          {
            name:'上海'
          }
        ]
      },
    }
  }
}
</script>