插件地址: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 文件中的样式名称,必须和第三步中的名称保持一致。


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue父子组件的传值总结