10. Vue 2 - json-viewer

OS	Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue	2.5.13

 

# 공식 깃 허브

chenfengjw163/vue-json-viewer

 

# 설명

[main.js]

import Vue from 'vue'
import App from './App.vue'
import JsonViewer from 'vue-json-viewer'

Vue.use(JsonViewer)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

 

[app.vue]

<!-- 방법 1 -->
<json-viewer :value="jsonData"></json-viewer>

<!-- 방법 2 -->
<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort></json-viewer>

 

json-viewer
:value	json 데이터
expand-depth	확장 깊이 ( =5 인 경우 5번째 자식까지 열려서 보여줌 )
copyable	복사 가능
boxed	박스화 (줄어듬)
sort	정렬