vue 前端json格式化(后台返回数据)
将后台json数据如图显示
1.jsonView组件处理数据
<template>
<div class="bgView">
<div :class="['json-view', length ? 'closeable' : '']" :style="'font-size:' + fontSize+'px'">
<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">
{
{
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 :closed="closed" v-if="item.isJSON" :key="index" :json="item.value"
:jsonKey="item.key" :isL