vue項目中使用插件將字符串裝化為格式化的json數據（可伸縮）

插件地址：https://www.npmjs.com/package/vue-json-viewer

第一步：安裝vue-json-viewer插件

$ npm install vue-json-viewer --save

如果npm安裝報錯，可換成cnpm安裝

第二步：在當前頁面中引入

import Vue from 'vue'

import JsonViewer from 'vue-json-viewer'

Vue.use(JsonViewer) 

注釋：

（1）如果在全局main.js中引入，那么全局可用，無需在單獨頁面的components中注入JsonViewer，可直接調用組件；

（2）如果在單頁面中只需要引入 import JsonViewer from 'vue-json-viewer' ，然后在components中注入JsonViewer 組件，即可正常使用。

（3）jsonData必須轉化為json格式的數據才行

 

例子如下：

<template>
    <div>
            <json-viewer :value="jsonData"></json-viewer>
    </div>
</template>

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

    export default {
        data() {
            return {
                jsonData:{
                    total: 25,
                    limit: 10,
                    skip: 0,
                    links: {
                        previous: undefined,
                        next: function () {},
                    }
                }
            }
        }
    }
</script>                                  

多層次也是木有問題的，詳細內容請參考插件的官方文檔

 

更換json數據的默認樣式

第一步：在node_mouldes中找到vue-json-viewer ，新建個my-awesome-json-theme.scss文件

第二步：在頁面中引入css文件：如：import 'vue-json-viewer/my-awesome-json-theme.scss'

第三步：將theme="my-awesome-json-theme"添加到JsonViewer組件。如下：

<json-viewer  :value="jsonData" theme="my-awesome-json-theme"></json-viewer>

json格式化數據的樣式，請到:my-awesome-json-theme.scss 文件中修改

注釋：my-awesome-json-theme.scss 文件中的樣式名稱，必須和第三步中的名稱保持一致。