关于VueJsonPretty美化返回数据

最新推荐文章于 2025-04-23 07:13:14 发布
最新推荐文章于 2025-04-23 07:13:14 发布
阅读量2.2k 收藏 2
点赞数
文章标签： vue.js npm 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44191425/article/details/122670990
版权
本文介绍了如何在Vue项目中使用VueJsonPretty插件来美化返回的JSON数据。通过下载、引入、注册和设置参数，实现了将JSON数组数据以直观的方式展示。在使用过程中需要注意相关配置和使用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先上效果图
在这里插入图片描述
最近有个小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";

注册

在这里插入图片描述


                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

				
					
json代码高亮显示插件vue-json-pretty

				
			

			

				

					qq_45021462的博客
				

				

					01-03
					
					10000
					
				

			

		

		

			
				
vue-json-pretty的用法
vue-json-pretty是用来格式化展示json数据的

GitHub ： vue-json-pretty的详细用法
用法

npm下载

npm install vue-json-pretty --save


引入

import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';


注册组建

export default {
  components

			
		

	



                

            
              



	

		

			

				
					
vue 单击行数据变色，根据某一行数据状态改变当前数据颜色

				
			

			

				

					qq_37523855的博客
				

				

					10-11
					
					1268
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title&gt...

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					02-03
				

			

		

		

			
				
Vue组件，用于将JSON数据呈现为树结构。
 现在，它至少支持Vue3。 如果你还在用Vue2，看到。
 English |
产品特点
作为JSON格式化程序。
 从JSON获取商品数据。
 用具有可预测的静态类型的TypeScript编写。
 支持大数据。
环境支援
现代浏览器，Electron和Internet Explorer 11（带有polyfill）
 服务器端渲染
 IE浏览器/边缘
 火狐浏览器
 Chrome
 苹果浏览器
 电子
IE11，边缘
最近的10个版本
最近的10个版本
最近的10个版本
最近2个版本
使用NPM或纱线
$ npm install vue-jso

			
		

	





	

		

			

				
					
推荐一款优雅的Vue JSON 格式化组件：Vue Json Pretty

				
			

			

				

					gitblog_00002的博客
				

				

					05-15
					
					3534
					
				

			

		

		

			
				
推荐一款优雅的Vue JSON 格式化组件：Vue Json Pretty
项目地址:https://gitcode.com/gh_mirrors/vu/vue-json-pretty
在日常开发中，我们经常需要处理和展示JSON数据。为了使数据更易于理解和操作，格式化的JSON视图是必不可少的工具。今天，我要向大家推荐一款强大的Vue组件——Vue Json Pretty，它将帮助你以树形结构清...

			
		

	



		

			
		



	

		

			

				
					
开源项目 vue-json-pretty 亮点详解

					
最新发布

				
			

			

				

					gitblog_00178的博客
				

				

					04-23
					
					678
					
				

			

		

		

			
				
开源项目 vue-json-pretty 亮点详解

    
        
            vue-json-pretty
            A JSON tree view component that is easy to use and also supports data selection.
            
                
        ...

			
		

	





	

		

			

				
					
vue3-json-viewer和vue-json-pretty插件使用，vue3 json数据美化展示

				
			

			

				

					2301_77189077的博客
				

				

					01-17
					
					2195
					
				

			

		

		

			
				
vue3使用vue3-json-viewer和vue-json-pretty进行json数据美化展示，语法糖形式引用

			
		

	





	

		

			

				
					
JSON显示vue-json-pretty

				
			

			

				

					qq_38407055的博客
				

				

					03-24
					
					217
					
				

			

		

		

			
				
{{ line }}

			
		

	





	

		

			

				
					
vuejsonpretty  显示行号

				
			

			

				

					03-15
				

			

		

		

			
				
### 配置 `vue-json-pretty` 以显示...更多关于此插件的信息可访问官方仓库地址获取最新文档支持[^4]: [https://gitcode.com/gh_mirrors/vu/vue-json-pretty](https://gitcode.com/gh_mirrors/vu/vue-json-pretty)  ---

			
		

	





	

		

			

				
					
vuejsonpretty  1.8配置项

				
			

			

				

					03-15
				

			

		

		

			
				
好的，我现在要处理用户关于“vue--pretty v1.8 配置项说明”的问题。首先，我需要确定用户提到的具体工具或库是什么。因为“vue--pretty”听起来可能是一个用于代码格式化或美化的Vue相关工具，但我不确定它的确切...

			
		

	





	

		

			

				
					
vuejsonpretty 手动控制展开和折叠

				
			

			

				

					11-01
				

			

		

		

			
				
VueJSONPretty是一个用于美化展示Vue应用中的JSON数据的轻量级插件。它允许你在前端方便地查看和操作复杂的JSON结构，通过`v-model`绑定数据，并提供了一些方法来手动控制节点的展开和折叠。  你可以使用`...

			
		

	





	

		

			

				
					
Vue Json Pretty 安装和配置指南

				
			

			

				

					gitblog_07187的博客
				

				

					09-13
					
					2251
					
				

			

		

		

			
				
Vue Json Pretty 安装和配置指南

    
        
            vue-json-pretty
            A JSON tree view component that is easy to use and also supports data selection.
            
                
          ...

			
		

	





	

		

			

				
					
谷歌插件 vue和json美化

				
			

			

				

					08-24
				

			

		

		

			
				
谷歌插件 vue和json美化

			
		

	





	

		

			

				
					
Vue展示json树形结构代码高亮显示插件vue-json-pretty

				
			

			

				

					qq_37656005的博客
				

				

					08-13
					
					8388
					
				

			

		

		

			
				
vue-json-pretty
是一个将 JSON 字符串渲染成树形结构的 Vue 组件
GitHub地址： 详细用法
用法：

npm 下载

npm install vue-json-pretty --save


项目里引入

import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';


注册组件

export default {
  components: {
    VueJsonP

			
		

	





	

		

			

				
					
【前端】Vue项目中 JSON 编辑器的使用

				
			

			

				

					No8g攻城狮的博客
				

				

					06-01
					
					7544
					
				

			

		

		

			
				
现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。以下是列举了几种，可以根据风格或者喜好随意选择其中的一种即可。如果有兴趣的话，每一种都可以试着写下哦。
2.2 示例代码

2.3 效果图
以下是vue2版本的依赖，如果需要vue3请自行查询对应的版本然后安装对应的依赖
3.2 示例代码

3.3 效果图
官网：https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor
4.2 示例代码

4.3 效果图

5.2

			
		

	





	

		

			

				
					
vue2 el-table中显示json数据

				
			

			

				

					世上没有真正的感同身受
				

				

					03-28
					
					893
					
				

			

		

		

			
				
用到插件：vue-json-pretty。效果如下：可打开json数据。

			
		

	





	

		

			

				
					
Vue Json Pretty 项目推荐

				
			

			

				

					gitblog_07177的博客
				

				

					09-13
					
					812
					
				

			

		

		

			
				
Vue Json Pretty 项目推荐

    
        
            vue-json-pretty
            A JSON tree view component that is easy to use and also supports data selection.
            
                
             ...

			
		

	





	

		

			

				
					
vue3 中 JSON可视化(将后端数据，以格式化过后的形式展示)，以及颜色设置，步长设置

				
			

			

				

					qq_52373373的博客
				

				

					06-03
					
					2586
					
				

			

		

		

			
				
vue3 中 JSON可视化(将后端数据，以格式化过后的形式展示)，以及颜色设置，步长设置

			
		

	





	

		

			

				
					
Vue 的 JSON 格式数据与树形(Tree)结构数据转换的插件

				
			

			

				

					无解的菜鸟晖    的博客
				

				

					06-08
					
					4916
					
				

			

		

		

			
				
1、


			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
左撇子没秃头

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值