使用vue-json-viewer实现高亮展示、折叠和复制json数据

最新推荐文章于 2024-06-19 16:20:35 发布
最新推荐文章于 2024-06-19 16:20:35 发布
阅读量4.9k 收藏 15
点赞数 4
文章标签： json javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luwen63257270/article/details/120762240
版权
本文介绍了如何在前端项目中利用vue-json-viewer组件来展示JSON数据，包括高亮显示、折叠功能以及添加自定义的展开收起按钮。通过安装、引入和注册组件，设置expanded属性来控制默认展开状态，并在数据切换时更新组件的key以实现重新渲染。
摘要由CSDN通过智能技术生成

最近项目上有个需求，就是在前端显示json格式的数据，并且提供展开和收起的按钮。先看一下最终完成的效果吧。
在这里插入图片描述
在这里我使用了vue-json-viewer这个组件来实现这个效果。这个组件主要能实现高亮、json折叠和copy功能，能满足项目需求。

一、安装

npm install vue-json-viewer --save

二、引入并注册

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

三、使用


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  努力码代码啦啦啦
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    15
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue vue-json-viewer 展示 JSON 格式数据

				
			

			

				

					且听风吟的博客
				

				

					04-12
					
					5602
					
				

			

		

		

			
				
vue vue-json-viewer 展示 JSON 格式数据

			
		

	



                

              
                



	

		

			

				
					
1：创建项目工程(1)

				
			

			

				

					2401_84097436的博客
				

				

					05-04
					
					761
					
				

			

		

		

			
				
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

			
		

	



                


  
              

                


	

		

			

				
					
vue 或html 一键复制copy功能，对JSON数据自定义复制

				
			

			

				

					qq_53722480的博客
				

				

					02-07
					
					552
					
				

			

		

		

			
				
【代码】vue 或html 一键复制copy功能，对JSON数据自定义复制。

			
		

	





	

		

			

				
					
vue-json-viewer组件 copyable失效，页面并不现实copy按钮

					
最新发布

				
			

			

				

					FurtherSkyQ的博客
				

				

					06-19
					
					431
					
				

			

		

		

			
				
在json-viewer中通过v-slot后，页面正常可以复制了，如下图。最后通过官网的issue得出，这是个bug，我的版本是。注意：这里我的页面右上角并没有出现copy按钮。

			
		

	



		

			
		



	

		

			

				
					
vue-json-view:一个用于展示json文件的vue组件

				
			

			

				

					05-03
				

			

		

		

			
				
开发背景：
项目开发过程中遇到展示json的场景，且json文件体积过大，小则几百kb，也尝试了已经开源的部分组件，但由于节点过多，渲染速度过慢，无法使用，已有项目技术选型为vue，无法再使用react相关技术，所以考虑自己开发一款。
开发过程中参考了react-json-view部分api,组件实现的功能比较基础，但满足基本业务场景，也提供了一些可选配置。
即使加载1M左右的json文时，也能实现快速打开
1.查看示例
git clone  https://github.com/zhaoxuhui1122/vue-json-view.git
npm i
npm run dev
或 直接双击index.html
2.在项目中使用
npm i -S vue-json-views  // 注意是 views
import jsonView from 'vue-json-views'
或
直接将

			
		

	





	

		

			

				
					
vue 使用vue-json-viewer 展示 JSON 格式数据

				
			

			

				

					qq_37831545的博客
				

				

					05-29
					
					8252
					
				

			

		

		

			
				
【代码】vue 使用vue-json-viewer 展示 JSON 格式数据。

			
		

	





	

		

			

				
					
VUE展示JSON格式数据vue-json-views使用

				
			

			

				

					lipenghao111的博客
				

				

					09-07
					
					560
					
				

			

		

		

			
				
【代码】vue-json-views使用。

			
		

	





	

		

			

				
					
前端格式化显示json数据可折叠可展开----vue-json-viewer

				
			

			

				

					芳草萋萋鹦鹉洲哦
				

				

					06-14
					
					5770
					
				

			

		

		

			
				
话不多说，来张效果图：

实现方式是安装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">
	<!--

			
		

	





	

		

			

				
					
vue-json-viewer插件实现JSON数据在页面的展示【高亮、可折叠、可复制

				
			

			

				

					m0_60635245的博客
				

				

					04-03
					
					765
					
				

			

		

		

			
				
1、写死的实现：data() {return {age: 18},},},2、动态赋值实现如果动态赋值的话，后台数据返回的可能是一个字符json，需要。

			
		

	





	

		

			

				
					
vue-json-pretty：一个易于使用并且支持数据选择的JSON树视图组件

				
			

			

				

					02-03
				

			

		

		

			
				
Vue组件，用于将JSON数据呈现为树结构。  现在，它至少支持Vue3。 如果你还在用Vue2，看到。  English | 产品特点 作为JSON格式化程序。  从JSON获取商品数据。... 用具有可预测的静态类型的...$ npm install vue-jso

			
		

	





	

		

			

				
					
vue-json-tree-view：Vue.js的JSON树视图组件

				
			

			

				

					02-06
				

			

		

		

			
				
安装使用npm安装插件： npm install --save vue-json-tree-view 然后，在您的Application JavaScript中，添加： import TreeView from "vue-json-tree-view"Vue . use ( TreeView ) 做完了用法将tree-view元素放到...

			
		

	





	

		

			

				
					
vue-jsonschema-form:vue2的JSON模式表单生成器

				
			

			

				

					05-12
				

			

		

		

			
				
vue-jsonschema-form [WIP：未准备好]  基于JSON模式表单生成器 概述 该项目的目的是创建一个简单的Vue组件，该组件能够根据构建HTML表单，并且默认情况下使用语义。 入门 克隆此存储库，安装依赖项并使用dev命令...

			
		

	





	

		

			

				
					
vue-json-edit：作为vue组件构建的Visual JSON编辑器。 提供基本的GUI

				
			

			

				

					02-03
				

			

		

		

			
				
Vue-Json编辑 作为vue组件构建的Visual JSON编辑器。 提供基本的GUI 入门 npm install vue-json-edit --save 用法 //import it in your project At your entry point import Vue from 'vue' import JsonEditor from ...

			
		

	





	

		

			

				
					
vue-json-excel

				
			

			

				

					05-07
				

			

		

		

			
				
入门获取包装： npm install vue-json-excel 在您的vue应用入口点注册JsonExcel： import Vue from "vue" ;import JsonExcel from "vue-json-excel" ;Vue . component ( "downloadExcel" , JsonExcel ) ; 在您的模板...

			
		

	





	

		

			

				
					
Vue中 引入使用 vue-json-views

				
			

			

				

					明天也要努力的博客
				

				

					08-15
					
					4138
					
				

			

		

		

			
				
项目开发过程中遇到展示 json 的场景，且 json 文件体积过大，小则几百kb。vue-json-views 即使加载 1M 左右的 json 文时，结合deep 深度限制，也能实现秒开的速度，组件压所过后体积只有15.7kb，开启gzip压缩后只有4.74kb。
1. 示例及文档
在线示例
在线文档
git clone  https://github.com/zhaoxuhui1122/vue-json-view.git
npm i
npm run dev
// 或 直接双击index.html

2

			
		

	





	

		

			

				
					
vue-json-view 一款用于展示json的vue组件，支持大体积json文件快速解析渲染

				
			

			

				

					weixin_33841503的博客
				

				

					05-09
					
					7359
					
				

			

		

		

			
				
在线示例
开发背景：
项目开发过程中遇到展示json的场景，且json文件体积过大，小则几百kb，也尝试了已经开源的部分组件，但由于节点过多，渲染速度过慢，无法使用，已有项目技术选型为vue，无法再使用react相关技术，所以考虑自己开发一款。
开发过程中参考了react-json-view部分api,组件实现的功能比较基础，但满足基本业务场景，也提供了一些可选配置。
即使加载1M左右的json文...

			
		

	





	

		

			

				
					
vue中json展示插件vue-json-views

				
			

			

				

					sanrenxingqg的博客
				

				

					01-04
					
					1970
					
				

			

		

		

			
				
npm i vue-json-views

<template>
  <div>
      <json-view :data="data" />
  </div>
</template>

<script>
import jsonView from 'vue-json-views'
export default {
  components: {
    jsonView
  },
  data() {
    return {
  

			
		

	





	

		

			

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

				
			

			

				

					sunshineTing2的博客
				

				

					10-28
					
					7393
					
				

			

		

		

			
				
VUE展示JSON数据

			
		

	





	

		

			

				
					
vue-json-viewer

				
			

			

				

					09-04
				

			

		

		

			
				
Vue-json-viewer是一个Vue组件，用于在Vue应用中显示JSON数据的可视化工具。可以通过在main.js入口文件中导入JsonViewer组件并在Vue实例中使用Vue.use(JsonViewer)来安装和使用它。在.vue文件中，可以使用<json-viewer>标签将要渲染的JSON数据传递给value属性。这样，vue-json-viewer组件会将JSON数据以可视化的形式展示出来，提供更好的用户体验和数据展示效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* *3* [vue使用vue-json-viewer展示JSON数据步骤](https://blog.csdn.net/wanghaoyingand/article/details/124439426)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
-  *2* [VUE展示JSON格式数据【vue-json-viewer】](https://blog.csdn.net/sunshineTing2/article/details/127573404)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值