Vue中顯示json格式插件vue-json-viewer

場景：想要獲取到的數據，以json的格式展示在頁面中。

需要使用插件：vue-json-viewer

安裝：npm install vue-json-viewer --save

在 Vue項目中main.js中引入

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

在vue文件中直接使用

<json-viewer
        :value="jsonData"   //指定的json數據，在data中聲明定義
        :expand-depth="5"
        copyable
        boxed
        sort
      ></json-viewer>

可配置項：

參數	說明	默認值
value	JSON 數據(支持與 v-model使用)	Required
expand-depth	在此深度下，進一步下陷	1
copyable	顯示“復制”按鈕，可以自定義復制文本只需設置{copy text:'copy'，copiedText:'copied'}或設置為true使用默認的copyText	false
sort	顯示前排序鍵	false
boxed	為component組件添加一個奇特的“盒裝”樣式	false
theme	添加自定義CSS類以創建主題	jv-light