用vue-json-viewer美化页面展示json

最新推荐文章于 2024-09-05 15:59:24 发布
最新推荐文章于 2024-09-05 15:59:24 发布
阅读量824 收藏
点赞数 1
文章标签： vue.js json javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tsyunge/article/details/137350278
版权

1、安装vue-json-viewer插件

yarn add vue-json-viewer --save

2、引入

import vueJsonViewer from 'vue-json-viewer'

3、使用

<vue-json-viewer

:value="JSON对象"

:expand-depth="5"

copyable

boxed

sort

:show-array-index="false"

>

</vue-json-viewer>

4、注意value属性里面绑定的是json对象，而不是json字符串,否则样式不会生效

tsyunge
关注
使用vue-json-viewer实现高亮展示、折叠和复制json数据
luwen63257270的博客
10-14 5134
最近项目上有个需求，就是在前端显示json格式的数据，并且提供展开和收起的按钮。先看一下最终完成的效果吧。 在这里我使用了vue-json-viewer这个组件来实现这个效果。这个组件主要能实现高亮、json折叠和copy功能，能满足项目需求。 一、安装 npm install vue-json-viewer --save 二、引入并注册 import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer) 三、使用 <json-viewer
关于VueJsonPretty美化返回数据
weixin_44191425的博客
01-24 2130
先上效果图 最近有个小demo，做一个规则生产的项目，需求方希望返回的jscon数据可以这么展示，于是使用了这这个插件 首先安装 npm下载 $ npm install vue-json-pretty --save yarn下载 $ yarn add vue-json-pretty 引入 （在需要使用这个插件的文件里面引入就可以了） import VueJsonPretty from "vue-json-pretty"; import "vue-json-pretty/lib/styles.css"
Vue2项目实现可视化json数据编辑及字段级别的权限控制
qq_26014419的博客
09-05 1198
使用vue-json-pretty和vue-json-schema-editor-visual封装一个vue组件来实现可以对json数据进行可视化编辑以及字段级别的权限管控
vue3.0使用高亮json，并自定义样式
weixin_45652809的博客
08-27 425
自定义样式在组件添加上class="my-awesome-json-theme" css部分样式均可修改。formData.event是需要展示的json内容。2.在需要格式化json的页面引用。安装成功后版本是^2.2.2。
一个基于electronvue开发的美化JSON小工具
08-10
一个基于 electron-vue 开发的 美化 JSON 小工具
vue3 中 JSON可视化(将后端数据，以格式化过后的形式展示)，以及颜色设置，步长设置
qq_52373373的博客
06-03 1596
vue3 中 JSON可视化(将后端数据，以格式化过后的形式展示)，以及颜色设置，步长设置
Vue中展示JSON字符串
weixin_42538870的博客
06-06 1659
Vue中展示JSON字符串 第一步： 安装 vue-json-viewer npm install vue-json-viewer --save // mac 电脑前面加sudo 第二步：在使用页面引入、注册 import JsonViewer from "vue-json-viewer"; // components: { JsonViewer, }, 第三步：标签使用： <json-viewer :value="jsonData" :expand-depth="2" copy
推荐一款优雅的Vue JSON 格式化组件：Vue Json Pretty
gitblog_00002的博客
05-15 2698
推荐一款优雅的Vue JSON 格式化组件：Vue Json Pretty 项目地址:https://gitcode.com/gh_mirrors/vu/vue-json-pretty 在日常开发中，我们经常需要处理和展示JSON数据。为了使数据更易于理解和操作，格式化的JSON视图是必不可少的工具。今天，我要向大家推荐一款强大的Vue组件——Vue Json Pretty，它将帮助你以树形结构清...
Vue el-table中json缩略展示并美化json格式及气泡框
Ssoul、肥鱼的博客
08-31 1650
【代码】Vue el-table中json缩略展示并美化json格式及气泡框。
vue-json-pretty：一个易于使用并且支持数据选择的JSON树视图组件
02-03
Vue组件，用于将JSON数据呈现为树结构。 现在，它至少支持Vue3。 如果你还在用Vue2，看到。 English | 产品特点 作为JSON格式化程序。 从JSON获取商品数据。 用具有可预测的静态类型的TypeScript编写。 支持...
vue-json-viewer插件实现JSON数据在页面的展示【高亮、可折叠、可复制】
2401_84152911的博客
05-06 971
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue-json-view:一个用于展示json文件的vue组件
05-03
项目开发过程中遇到展示json的场景，且json文件体积过大，小则几百kb，也尝试了已经开源的部分组件，但由于节点过多，渲染速度过慢，无法使用，已有项目技术选型为vue，无法再使用react相关技术，所以考虑自己开发一...
vue vue-json-viewer 展示 JSON 格式数据
且听风吟的博客
04-12 5711
vue vue-json-viewer 展示 JSON 格式数据
Vue JsonView 树形格式化代码插件
weixin_33716557的博客
12-11 436
组件代码（临时粘出来） 1 <template> 2 <div class="bgView"> 3 <div :class="['json-view', length ? 'closeable' : '']" :style="'font-size:' + fontSize+'px'"> 4 <span ...
JSON美化展示
GodV_666的博客
12-21 605
需求：类似于vscode代码颜色处理，在页面中，美化展示一段JSON串。先来看下效果，此例只针对基本数据类型（函数字符串无法显示）。
vue页面中json格式化展示（高亮）
热门推荐
qq_30966497的博客
12-04 1万+
1、页面引入高亮插件 &lt;link rel="stylesheet" type="text/css" href="static/plugins/highlight.json.css"/&gt; &lt;script type="text/javascript" src="static/pluginshighlight.json.js"&gt;&lt;/scr
探索高效JSON可视化：JSONVue - 简洁、强大的工具
gitblog_00081的博客
03-25 651
探索高效JSON可视化：JSONVue - 简洁、强大的工具 JSONVue Fork of JSONView for Chromium-based browsers 项目地址: https://gitcode.com/gh_mirrors/js/JSONVue ...
【vue】工具向 - vue格式化json，使用插件json-viewer
loyd3的博客
11-29 2327
官网地址：https://www.npmjs.com/package/vue-json-viewer 安装 npm: npm install vue-json-viewer --save yarn: yarn add vue-json-viewer 在页面中引入 import Vue from 'vue' import JsonViewer from 'vue-json-viewer' // 以插件的形式引入 Vue.use(JsonViewer) // 或者注册组件 // components: {
在vue中使用codemirror格式化JSON
qq_43340606的博客
08-23 3358
1. 下载指定版本的包 (避免引发不必要的错误)2. 导入需要的文件。
vue-json-viewer去掉花括号
最新发布
09-27
Vue-json-viewer是一个轻量级的用于查看JSON数据的组件，如果你想让它去掉显示的花括号`{}`和方括号`[]`，通常可以在组件配置或自定义渲染函数中处理展示的数据。你可以尝试以下几种方法： 1. **配置选项**： 查看vue-json-viewer是否有提供一个选项可以直接控制是否显示花括号。例如，如果它有一个名为`stripBrackets`或者`hideBrackets`的选项，你可以设置为`true`。 ```javascript <template> <vue-json-viewer :data="yourJsonData" :strip-brackets="true"></vue-json-viewer> </template> <script> export default { data() { return { yourJsonData: {...}, }; }, }; </script> ``` 2. **自定义渲染函数**： 如果组件允许自定义渲染方法，你可以直接将原始JSON转换成字符串，去除花括号。 ```javascript <template> <div v-html="formattedJson"></div> </template> <script> import VueJsonViewer from 'vue-json-viewer'; export default { components: { VueJsonViewer }, computed: { formattedJson() { const json = JSON.stringify(this.yourJsonData, null, 2); // 空字符串或null用于移除缩进，2表示缩进两空格 return json.replace(/\{\s*\}/g, '').replace(/\[\s*\]/g, ''); }, }, }; </script> ``` 记得替换`yourJsonData`为你实际使用的JSON数据。如果你找不到相关的文档，建议查阅组件的官方文档或通过GitHub issue联系作者寻求帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值