vue-json-viewer展示JSON内容实践

更新时间：2026年03月25日 09:29:36 作者：jahon_cj

这篇文章主要介绍了vue-json-viewer展示JSON内容实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

最近写的一个小案例，需要将接口返回的JSON内容显示在页面上，要求是要和控制台返回的JSON内容一样能点击展开显示或者关闭，当时只知道处理内容格式，后来才发现可以通过json-viewer解决。

接口内容预处理

我这边是用axios去获取接口内容，最开始是获取到一个对象，因为想着要获取其内容要以JSON格式展示，所以要将该对象进行JSON格式化。

JSON格式化的方式如下：

JSON.stringify(value, replacer, space)
//value是指js对象
//replacer为替换对象，可以是一个方法、对象或数组，将value按照替换规则展示。
//space为填充参数，可以是数字或字符串，将value按照参数进行格式化展示。

但是通过JSON.stringify()处理后的内容直接用json-viewer，发现是一堆类似JSON格式的文本，依旧实现不了控制台那样的点击展开或关闭的情况，后面发现还要通过JSON.parse()进一步处理，将其处理成JavaScript对象。

所以接口内容处理代码如下：

		axios.get(this.urlAdd).then(res => {
          console.log(res);
          this.dataResponse = JSON.stringify(res, null, ' ');
          this.dataResponse = JSON.parse(this.dataResponse);
        })

json-viewer使用

json-viewer属于vue的插件，所以使用前需要安装。

vue-json-viewer插件安装

npm install vue-json-viewer --save

引入插件

我这边是全局引入，另外还引入了对应的样式，代码如下：

//main.js
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer);

//App.vue
import 'vue-json-viewer/style.css';

使用插件

插件引入后，直接在Vue所控制的元素块内对应的位置使用即可。

具体使用方法可以参考官网地址：vue-json-viewer

我这边的代码如下：

<json-viewer :value="dataResponse" :expand-depth=2 copyable boxed sort v-if="dataResponse"  @keyclick="handleClickJson"></json-viewer>

其中绑定的keyclick事件，是我之后用于点击展示的对应的JSON内容，获取所点击位置的值而绑定的事件。

expand-depth的值是指默认展示的层数。

总结

基本上通过上述步骤就能成功把JSON内容按控制台的格式展示在页面上了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中跨页面通信的8种主流方式详解
在Vue项目开发中,跨页面通信是高频需求,本文整理8种主流通信方式,每种方式附完整可运行Demo、适配场景和注意事项,覆盖Vue2、Vue3所有项目场景,新手也能直接复制落地,快跟随小编一起学习一下吧
2026-04-04
使用Vue构建可重用的分页组件
分页组件在web项目中是十分常见的组件，让我们使用Vue构建可重用的分页组件，关于基本结构和相关事件监听大家参考下本文
2018-03-03
vue3组件库添加脚本的实现示例
本文主要介绍了vue3组件库添加脚本的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-06-06
Vue自定义组件的四种方式示例详解
本文给大家分享vue自定义组件的四种方式，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2020-02-02
Composition API思想封装NProgress示例详解
这篇文章主要为大家介绍了Composition API思想封装NProgress示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue 纯js监听滚动条到底部的实例讲解
今天小编就为大家分享一篇vue 纯js监听滚动条到底部的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
基于Vue3的打卡计时器实现方案
在日常工作和生活中,我们经常需要记录时间间隔,比如工作打卡、学习时长、项目耗时等,今天我将为大家介绍一个基于Vue3的打卡计时器实现方案,需要的朋友可以参考下
2026-03-03
Vue之Axios的异步请求问题详解
总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路，Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，主要作用就是实现AJAX异步通信
2023-02-02
vue+vant实现商品列表批量倒计时功能
这篇文章主要介绍了vue+vant实现商品列表批量倒计时功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
Vue3应对后端接口返回十万条数据的解决方案
在前端开发中,我们有时会遇到后端接口直接返回十万条数据的情况,很多初学者会直接把数据全部 v-for 渲染到页面上,结果浏览器瞬间卡死甚至崩溃,本文将从问题原因出发,逐步给出几种常见解决方案,需要的朋友可以参考下
2025-09-09