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内容按控制台的格式展示在页面上了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在数据可视化领域,图表是展示复杂数据的重要工具,本文将详细介绍如何在Vue3中实现两种常见的图表类型,多系列柱状图和堆叠曲线图,并结合实际场景进行数据展示2025-07-07
本篇文章主要介绍了vue中添加mp3音频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
element-ui中实现tree子节点部分选中时父节点也选中
这篇文章主要介绍了element-ui中实现tree子节点部分选中时父节点也选中的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
虚拟列表是一种技术，它只渲染用户当前可见的列表项，而不是渲染整个列表，这篇文章主要来和大家聊聊虚拟列表的原理与实现，希望对大家有所帮助2023-05-05
这篇文章主要介绍了Node.js path模块,获取文件后缀名操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue瀑布流插件的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
文章介绍uni-app中easycom自定义组件机制,通过路径规范和配置简化组件使用流程,无需手动注册和导入,重点说明npm安装uni-ui后需配置vue.config.js编译,支持按需打包和自动加载,提升开发效率,同时区分Vue/uvue优先级及组件类型兼容性,感兴趣的朋友一起看看吧2025-07-07
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码
这篇文章主要介绍了Vue实现Tab标签路由效果，并用Animate.css做转场动画效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了vue在图片上传的时候压缩图片，帮助大家缓解服务器压力，提高程序性能，感兴趣的朋友可以了解下2020-11-11
在当今图片密集的网络环境中,优化图片加载已成为前端开发的重要任务,今天我们分享一下怎么使用 Vue3 实现图片的懒加载功能,需要的朋友可以参考下2025-12-12
最新评论