VUE展示JSON格式数据【vue-json-viewer】

原创 已于 2022-11-28 11:26:13 修改 · 8.4k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #json #前端

于 2022-10-28 16:04:27 首次发布
博客介绍了Vue组件的安装及使用方法，包括在main.js中引入使用和在.vue文件中使用。同时提到若obj数据为JSON格式字符串，需先转换为对象，还展示了JSON格式化前后的效果。
一、安装组件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中使用JsonView进行JSON数据展示
独泪了无痕
03-26 3055
Vue-JSON-Viewer 是一个用于在Vue项目中展示JSON数据的组件，它解决了在项目开发中面临的展示JSON数据的需求，尤其是当JSON文件体积较大时，也可以快速渲染。用官方的话来说，就是一个专为 Vue.js 框架设计的简单 JSON 查看器组件，兼容 Vue.js 2.x 及 3.x，并支持服务器端渲染（SSR）。此项目由 JavaScript 编写，采用 MIT 许可证分发，是处理和展示 JSON 数据的理想选择，尤其是对于那些需要以可视化方式查看复杂数据结构的开发者来说。
vue vue-json-viewer 展示 JSON 格式数据
且听风吟的博客
04-12 5999
vue vue-json-viewer 展示 JSON 格式数据
如何快速集成Vue JSON Viewer：让JSON数据展示从未如此简单 ✨
最新发布
gitblog_01197的博客
10-24 799
Vue JSON Viewer 是一个专为 Vue.js 开发的轻量级 JSON 树形视图组件，支持数据折叠/展开、类型高亮和 SSR 渲染，帮助开发者在前端优雅地展示复杂 JSON 数据结构。无论是 API 响应调试、配置数据预览还是日志查看，它都能让数据可视化变得直观高效。 ## ???? 为什么选择 Vue JSON Viewer？ 在前端开发中，直接打印 JSON 数据往往杂乱无章，而 V...
VueJSONTreeView一个基于Vuejs开发的JSON树视图
08-10
Vue JSON Tree View 一个基于Vue.js开发的JSON树视图
vue展示json格式数据【vue-json-viewer】
2401_83036723的博客
05-06 2117
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript对象表示法（JavaScript Object Notation），常用于Web开发中。·轻量级：JSON格式简单，易于阅读和编写，并且占用的存储空间较小。·跨平台：JSON是一种跨平台的数据格式，可以在不同的编程语言和系统之间进行数据交换。·易于解析：JSON格式易于解析，可以使用各种编程语言中的标准库或第三方库来解析JSON数据。·支持嵌套：JSON支持嵌套结构。
VUE将代码json格式展示到界面
人民有信仰民族有希望国家有力量
01-04 4183
有一个需求后端把系统日志传给前端，传出得格式为没有空格换行得字符串格式代码，需要全端格式化展示在界面。
Vue 2.0中使用Vue-json-viewer 展示JSON格式数据
分享前端工程化、动效魔法与性能之舞！
12-10 1万+
最近在开发一个公司的投放管理系统的操作日志模块，要查看某条操作日志的请求参数，要将请求的参数以JSON格式的形式展示出来，于是用到了vue-json-viewer这个插件。 以下是实现的效果： 插件的使用步骤： 1. 安装插件 npm install vue-json-viewer --save 如果npm安装报错，可换成cnpm安装。 2. 引入插件 引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。 如果在全局main.js中引入，那
精选资源
vue-json-pretty：一个易于使用并且支持数据选择的JSON树视图组件
02-03
Vue组件，用于将JSON数据呈现为树结构。 现在，它至少支持Vue3。 如果你还在用Vue2，看到。 English | 产品特点 作为JSON格式化程序。 从JSON获取商品数据。 用具有可预测的静态类型的TypeScript编写。 支持...
前端格式化显示json数据可折叠可展开----vue-json-viewer
芳草萋萋鹦鹉洲哦
06-14 6567
话不多说，来张效果图： 实现方式是安装vue-json-viewer插件，实现步骤如下： 1、安装vue-json-viewer npm install vue-json-viewer --save 2、main.js引入vue-json-viewer import JsonViewer from 'vue-json-viewer' 3、利用vue-json-viewer展示Json树 <template> <div class="json_box"> <!--
vue3.x显示json数据组件-vue3-json-viewer
邱权武(isfive)的博客
01-28 8636
vue3-json-viewer 简单易用的json内容展示组件,适配vue3和vite。 在使用vue3+vite开发时，发现需要用到显示json数据组件，发现vue-json-viewer只能兼容vue2，于是花了一个小时，重写的vue3的适配。 原作者：github 代码仓库 GitHub Gitee 安装 需要依赖clipboard，先安装clipboard $ npm install clipboard --save 再安装vue3-json-viewer $ npm install v
vue中用JSON格式查看数据（vue-json-viewer）
Ninewu的博客
06-20 2214
vue中把string用JSON格式展示数据。
vue中json格式化显示（vue-json-viewer）
stay hungry, stay foolish
03-12 7608
添加到JsonViewer的组件属性上复制粘贴下面的模板并且根据自定义的theme名称做对应调整。
vue 使用vue-json-viewer 展示 JSON 格式数据
qq_37831545的博客
05-29 9319
【代码】vue 使用vue-json-viewer 展示 JSON 格式数据。
vue 在网页中显示json 格式
wodecc_u的博客
08-19 447
【代码】vue 在网页中显示json 格式。
vue-json-viewer插件实现JSON数据在页面的展示【高亮、可折叠、可复制】
任磊
12-09 5369
利用vue-json-viewer插件，利用这个插件，可方便快速实现高亮，JSON折叠，copy 三种功能！！！ 官网地址：https://www.npmjs.com/package/vue-json-viewer 效果展示 需要展示的JSON数据： { "Data": { "Body": "ew0KICAgICJuYW1lIjogIlN5c3RlbSIsDQogICAgImNvbmRpdGlvbnMiOiAiQ29udHJhY3RDb25kaXRpb25zKFwiQDFEu...
vue展示json数据，vue-json-viewer的使用
ddx2019的博客
01-19 4589
一、安装 yarn add vue-json-viewer 二、引入项目 src目录下plugins下的jsonViewer.js文件 import Vue from "vue"; import JsonViewer from "vue-json-viewer"; Vue.use(JsonViewer); 在 main.js文件 中引入 import "./plugins/jsonViewer.js"; 三、在组件中使用 test.vue文件 <template> <div c
vue-json-viewer实现JSON效果【高亮、可折叠、可复制】
热门推荐
少年单排，记录点滴
01-06 3万+
初学前端，用的架子是 vue+element ，目前有个需求，想将string类型的json字符串，以json格式展示。 利用vue-json-viewer插件，利用这个插件，可方便快速实现 高亮，JSON折叠，copy 三种功能 ！！！ 官网地址：https://www.npmjs.com/package/vue-json-viewer 效果展示 先放最终效果： ...
vue 与 vue-json-viewer 实现 JSON 数据可视化
希望看完文章的你能够带着答案离开。
01-13 3426
vue 与 vue-json-viewer 实现 JSON 数据可视化
vue-json-viewer 页面展示json数据
html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...
07-14 332
【代码】vue-json-viewer 页面展示json数据。
使用静态 JSON 数据在 vue3-json-viewer 展示
11-14
Vue3-JsonViewer是一个用于在Vue3应用中展示JSON数据的轻量级组件。当你想要在前端动态或静态地显示JSON数据时，可以使用它来可视化复杂的数据结构。要使用静态JSON数据展示，首先你需要在你的项目中引入这个库，并在HTML模板里使用它。 步骤如下： 1. 安装组件：如果你还没有安装，可以在项目中通过npm或yarn安装`vue3-json-viewer`： ```bash npm install vue3-json-viewer # 或者 yarn add vue3-json-viewer ``` 2. 在你的`.vue`文件中导入并使用组件： ```html <template> <div> <json-viewer :value="yourStaticJsonData"></json-viewer> </div> </template> <script> import { JsonViewer } from 'vue3-json-viewer'; export default { components: { JsonViewer, }, data() { return { yourStaticJsonData: { // 这里替换为你的静态JSON对象，例如： "name": "John Doe", "age": 30, "items": ["item1", "item2"] } }; }, }; </script> ``` 在这个例子中，`:value`属性绑定的是你在JavaScript对象里的静态JSON数据。当页面加载时，JSON Viewer会自动解析并渲染这个对象。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值