Vue开发：将JSON格式化展现在页面上

飞雪飘逸啦啦啦

于 2021-10-27 11:38:52 发布

阅读量1.7k

点赞数 1

文章标签： vue.js json 前端

本文链接：https://blog.youkuaiyun.com/weixin_42373679/article/details/120989417

版权

1. 安装组件 v-viewer

npm install --save vue-json-viewer

2. 全局引入

import JsonViewer from 'vue-json-viewer'

Vue.use(JsonViewer)

3. 组件中使用

<template>
    <json-viewer class="jsonview" 
        :value="xmlJson.Metadata"      
        :expand-depth="jsonformat.expandDepth"  
        :copyable="jsonformat.copyable" >
    </json-viewer>
</template>
<script>
    export default{
        data(){
            return{
                jsonformat:{
                    expandDepth:2,
                    copyable:true
                }
            }
        }
    }
</script>

value：要展示的json 数据

expand-depth：展开层级

copyable：是否添加复制json的按钮

4. 效果