一、安装组件vue-json-viewer
npm install vue-json-viewer --save
二、在main.js中引入并使用vue-json-viewer
import JsonViewer from 'vue-json-viewer';
Vue.use(JsonViewer);
三、在.vue文件中使用vue-json-viewer
<json-viewer :value="obj" ></json-viewer>

其中obj数据如果是JSON格式字符串，要先用JSON.parse()转成对象

<json-viewer
  :value="JSON.parse(alarmInfo.additionalInfo)"
  :expand-depth="5"
  boxed
  sort
></json-viewer>

未格式化效果
在这里插入图片描述
JSON格式化后
在这里插入图片描述

# vue.js # json # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

2025科研新风向！Top5文献阅读管理工具全测评

avatar GitCode 开源社区
cover

2025学术利器揭晓！Top5文献管理工具助攻科研创新

avatar GitCode 开源社区

2025科研效率翻倍！Top5文献管理工具实战推荐

2025年，科研效率翻倍不再是梦想，而是通过工具即可实现的现实。从沁言学术的全流程AI支持到Zotero的免费实用，从EndNote的格式精准到Scite的引用筛选，再到Mendeley的云端协作，这Top5文献管理工具为科研人员提供了丰富的实战选择。尤其值得推荐的是沁言学术，以其智能文献管理批量抓取、学术问答专业解答及写作辅助等功能，成为效率提升的强力引擎。科研之路，效率为先！如果你也想摆脱文献

avatar GitCode 开源社区