vue怎么实现Json格式数据展示

本文小编为大家详细介绍“Vue怎么实现JSON格式数据展示”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue怎么实现json格式数据展示”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

Json格式数据展示

vue的jsonViewer组件也很好用，在网上看到有大神自己写的组件（递归调用），觉得很好，稍作修改，记录一下

JSON.stringify(obj, null, 4)

可以美化json数据的显示 

<span class="light">要高亮的内容</span> 在json数据中，如果有需要高亮的内容，用以上标签包起来（这个要处理数据实现了，组件里高亮样式可以根据需要自己修改）

<template>    <div class="bgView">        <div :class="['json-view', length ? 'closeable' : '']" :>            <span @click="toggleClose" :class="['angle', innerclosed ? 'closed' : '']" v-if="length"></span>            <div class="content-wrap">                <p class="first-line">                    <span v-if="jsonKey" class="json-key">"{{jsonKey}}": </span>                    <span v-if="length" @click="toggleClose" >                       {{prefix}}                       {{innerclosed ? ('... ' + subfix) : ''}}                        <!-- <span class="json-note">                       {{innerclosed ? (' // count: ' + length) : ''}}                        </span> -->                    </span>                    <span v-if="!length">{{isArray ? '[]' : '{}'}}</span>                </p>                <div v-if="!innerclosed && length" class="json-body">                    <template v-for="(item, index) in items">                        <json-view v-if="item.isJSON"                                :closed="closed"                                :key="index"                                :json="item.value"                                :jsonKey="item.key"                                :depth="depth+1"                                :expandDepth="expandDepth"                                :isLast="index === items.length - 1"></json-view>                        <p v-else class="json-item" :key="index">                            <span class="json-key">                            {{(isArray ? '' : '"' + item.key + '":')}}                            </span>                            <span class="json-value" v-html="item.value + (index === items.length - 1 ? '' : ',')"/>                        </p>                    </template>                    <!--                    <span v-show="!innerclosed" class="body-line"></span>-->                </div>                <p v-if="!innerclosed && length" class="last-line">                    <span>{{subfix}}</span>                </p>            </div>        </div>    </div></template>

<script>    export default {        name: 'jsonView',        props: {            json: [Object, Array],            jsonKey: {                type: String,                default: ''            },            closed: {                type: Boolean,                default: true            },            isLast: {                type: Boolean,                default: true            },            fontSize: {                type: Number,                default: 13            },            expandDepth: {                type: Number,                default: 0            },            depth: {                type: Number,                default: 0            }        },        created() {            this.innerclosed = !this.closed ? this.closed : this.depth >= this.expandDepth            this.$watch('closed', () => {                this.innerclosed = this.closed            })        },        data() {            return {                innerclosed: true            }        },        methods: {            isObjectOrArray(source) {                const type = Object.prototype.toString.call(source)                const res = type === '[object Array]' || type === '[object Object]'                return res            },            toggleClose() {                if (this.innerclosed) {                    this.innerclosed = false                } else {                    this.innerclosed = true                }            }        },        computed: {            isArray() {                return Object.prototype.toString.call(this.json) === '[object Array]'            },            length() {                return this.isArray ? this.json.length : Object.keys(this.json).length            },            subfix() {                return (this.isArray ? ']' : '}') + (this.isLast ? '' : ',')            },            prefix() {                return this.isArray ? '[' : '{'            },            items() {                if (this.isArray) {                    return this.json.map(item => {                        const isJSON = this.isObjectOrArray(item)                        return {                            value: isJSON ? item : JSON.stringify(item),                            isJSON,                            key: ''                        }                    })                }                const json = this.json                return Object.keys(json).map(key => {                    const item = json[key]                    const isJSON = this.isObjectOrArray(item)                    return {                        value: isJSON ? item : JSON.stringify(item),                        isJSON,                        key                    }                })            }        }    }</script>

<style>    .bgView {        background-color: #efefef;        font-family: NotoSansCJKkr;    }     .json-view {        position: relative;        display: block;        width: 100%;        height: 100%;                padding: 0 20px;        box-sizing: border-box;        line-height: 30px;    }     .json-note {        color: #909399;    }     .json-key {        color: #333333;    }     .json-value {        color: #333333;    }     .json-item {        margin: 0;        padding-left: 20px;    }     .first-line {        padding: 0;        margin: 0;    }     .json-body {        position: relative;        padding: 0;        margin: 0;    }     .json-body .body-line {        position: absolute;        height: 100%;        width: 0;        border-left: dashed 1px #bbb;        top: 0;        left: 2px;    }     .last-line {        padding: 0;        margin: 0;    }     .angle {        position: absolute;        display: block;        cursor: pointer;        float: left;        width: 20px;        text-align: center;        left: 0;    }     .angle::after {        content: "";        display: inline-block;        width: 0;        height: 0;        vertical-align: middle;        border-top: solid 4px #333;        border-left: solid 6px transparent;        border-right: solid 6px transparent;    }     .angle.closed::after {        border-left: solid 4px #333;        border-top: solid 6px transparent;        border-bottom: solid 6px transparent;    }     .light {        color: #0595ff;    }</style>

vue解析json数据

在前端接授到json后，使用JSON.parse(jsonObject)就可以解析！（jsonObject为json对象）

读到这里，这篇“vue怎么实现Json格式数据展示”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。