当前位置: 首页 > news >正文

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

本文介绍vue3如何进行json数据pretty展示

1 vue3-json-viewer

1.1 安装
 npm install vue3-json-viewer --save
1.2 全局引入

在main.ts中引入,然后直接在组件中使用

import { createApp } from 'vue'
import App from './App.vue'
import JsonViewer from "vue3-json-viewer"const app=createApp(App)
app.use(JsonViewer)
app.mount('#app')
<json-viewer :value="jsonData" copyable boxed sort></json-viewer>
1.3 局部引入

如果使用频率少,只在某个组件上使用,那么在单个组件上进行引入使用即可,选项式API使用如下方式。

<script>
import { JsonViewer } from "vue-json-viewer";
import "vue-json-viewer/style.css";
export default {components: {JsonViewer,},
}
</script>

组合式API语法糖形式直接导入即可使用

<script setup>
import { JsonViewer } from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";
</script>

2 vue-json-pretty

​ 项目地址: vue-json-pretty

2.1 安装
npm install vue-json-pretty --save
yarn add vue-json-pretty
2.2引入使用

全局引入同上,仅演示局部引入方式.

<template><div><vue-json-pretty :data="{ key: 'value' }" /></div>
</template><script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';export default {components: {VueJsonPretty,},
};
</script>

同样,组合式API语法糖形式直接引入即可使用

<script setup>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
</script>
2.3 Props

​ vue-json-pretty 基本属性

PropertyDescriptionTypeDefault
data(v-model)JSON数据,支持v-model使用时可编辑JSON object-
collapsedNodeLength长度大于此阈值的对象或数组将被折叠number-
deep大于此深度的路径将被折叠number-
showLength显示折叠时的长度booleanfalse
showLine显示连接线booleantrue
showLineNumber显示行号booleanfalse
showIcon显示图标booleanfalse
showDoubleQuotes在键上显示双引号booleantrue
virtual使用虚拟滚动条booleanfalse
height使用virtual时列表的高度number400
itemHeight使用virtual时节点的高度number20
selectedValue(v-model)选择的数据路径string, array-
rootPath根节点路径stringroot
nodeSelectable定义节点是否支持选择(node) => boolean-
selectableType支持路径选择,默认无multiplesingle
showSelectController显示选择控制器booleanfalse

我更喜欢使用vue-json-pretty,可定制性要好些。

相关文章:

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

本文介绍vue3如何进行json数据pretty展示 1 vue3-json-viewer 1.1 安装 npm install vue3-json-viewer --save1.2 全局引入 在main.ts中引入&#xff0c;然后直接在组件中使用 import { createApp } from vue import App from ./App.vue import JsonViewer from "vue3…...

python转转商超书籍信息爬虫

1基本理论 1.1概念体系 网络爬虫又称网络蜘蛛、网络蚂蚁、网络机器人等&#xff0c;可以按照我们设置的规则自动化爬取网络上的信息&#xff0c;这些规则被称为爬虫算法。是一种自动化程序&#xff0c;用于从互联网上抓取数据。爬虫通过模拟浏览器的行为&#xff0c;访问网页并…...

Spring Boot 中的 InitializingBean:Bean 初始化背后的故事

在 Spring Boot 应用中&#xff0c;Bean 的生命周期管理至关重要。InitializingBean 接口允许 Bean 在完成属性注入后执行自定义初始化逻辑。本文将深入探讨 InitializingBean 接口在 Spring Boot 中的应用&#xff0c;揭示其工作原理&#xff0c;并分享一些最佳实践&#xff0…...

微信小程序:实现单选,多选,通过变量控制单选/多选

一、实现单选功能 微信小程序提供了 radio 组件来实现单选功能。radio 组件需要配合 radio-group 使用。 1. WXML 代码 <radio-group bindchange"onRadioChange"><label wx:for"{{items}}" wx:key"id"><radio value"{{it…...

MOS怎样选型,步骤详解

一&#xff1a;选用N沟道还是P沟道   为设计选择正确器件的第一步是决定采用N沟道还是P沟道MOSFET。在典型的功率应用中&#xff0c;当一个MOSFET接地&#xff0c;而负载连接到干线电压上时&#xff0c;该MOSFET就构成了低压侧开关。在低压侧开关中&#xff0c;应采用N沟道M…...

CMake技术细节:解决未定义,提供参数

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…...

1688 满足跨境业务需求而提供的一组 API 接口

1688 跨境属性接口系列是 1688 开放平台为满足跨境业务需求而提供的一组 API 接口&#xff0c;其中最主要的是1688.item_get : 一&#xff1a;1688.item_get接口 接口功能&#xff1a;主要用于查询 1688 商品的跨境属性&#xff0c;为开发者和商家提供了获取商品跨境关键信息…...

物联网网关Web服务器--CGI开发实例BMI计算

本例子通一个计算体重指数的程序来演示Web服务器CGI开发。 硬件环境&#xff1a;飞腾派开发板&#xff08;国产E2000处理器&#xff09; 软件环境&#xff1a;飞腾派OS&#xff08;Phytium Pi OS&#xff09; 硬件平台参考另一篇博客&#xff1a;国产化ARM平台-飞腾派开发板…...

计算机网络 (51)鉴别

前言 计算机网络鉴别是信息安全领域中的一项关键技术&#xff0c;主要用于验证用户或信息的真实性&#xff0c;以及确保信息的完整性和来源的可靠性。 一、目的与重要性 鉴别的目的是验明用户或信息的正身&#xff0c;对实体声称的身份进行唯一识别&#xff0c;以便验证其访问请…...

【Docker】搭建一个功能强大的自托管虚拟浏览器 - n.eko

前言 本教程基于群晖的NAS设备DS423的docker功能进行搭建&#xff0c;DSM版本为 DSM 7.2.2-72806 Update 2。 n.eko 支持多种类型浏览器在其虚拟环境中运行&#xff0c;本次教程使用 Chromium​ 浏览器镜像进行演示&#xff0c;支持访问内网设备和公网地址。 简介 n.eko 是…...

论文笔记(六十二)Diffusion Reward Learning Rewards via Conditional Video Diffusion

Diffusion Reward Learning Rewards via Conditional Video Diffusion 文章概括摘要1 引言2 相关工作3 前言4 方法4.1 基于扩散模型的专家视频建模4.2 条件熵作为奖励4.3 训练细节 5 实验5.1 实验设置5.2 主要结果5.3 零样本奖励泛化5.4 真实机器人评估5.5 消融研究 6 结论 文章…...

探索 Stable-Diffusion-Webui-Forge:更快的AI图像生成体验

目录 简介&#x1f31f; 主要特点&#x1f4e5; 安装步骤1. 下载2. 配置环境和安装依赖3. 模型目录说明 &#x1f680; 运行 Stable-Diffusion-Webui-Forge1. 进入项目目录2. 运行项目3. 打开页面 &#x1f3a8; 使用体验常见问题&#x1f4dd; 小结 简介 Stable-Diffusion-We…...

Redis使用基础

1 redis介绍 Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务 ! 是完全开源的&#xff0c;遵守 BSD 协议&#xff0c;是一个高性能的 key-value 数据库。 使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并…...

PyCharm+RobotFramework框架实现UDS自动化测试- (四)项目实战0x10

1.环境搭建 硬件环境&#xff1a;CANoe、待测设备&#xff08;包含UDS诊断模块&#xff09; 2.pythonPyCharm环境 pip install robotframework pip install robotframework-ride pip install openpyxl pip install udsoncan pip install python-can pip install can-isotp3…...

【TCP】rfc文档

tcp协议相关rfc有哪些 TCP&#xff08;传输控制协议&#xff09;是一个复杂的协议&#xff0c;其设计和实现涉及多个RFC文档。以下是一些与TCP协议密切相关的RFC文档列表&#xff0c;按照时间顺序排列&#xff0c;涵盖了从基础定义到高级特性和优化的各个方面&#xff1a; 基…...

【SpringCloud】黑马微服务学习笔记

目录 1. 关于微服务 ?1.1 微服务与单体架构的区别 ?1.2 SpringCloud 技术 2. 学习前准备 ?2.1 环境搭建 ?2.2 熟悉项目 3. 正式拆分 ?3.1 拆分商品功能模块 ?3.2 拆分购物车功能模块 4. 服务调用 ?4.1 介绍 ?4.2 RustTemplate?的使用 4.3 服务治理-注册中…...

梯度提升决策树树(GBDT)公式推导

### 逻辑回归的损失函数 逻辑回归模型用于分类问题&#xff0c;其输出是一个概率值。对于二分类问题&#xff0c;逻辑回归模型的输出可以表示为&#xff1a; \[ P(y 1 | x) \frac{1}{1 e^{-F(x)}} \] 其中 \( F(x) \) 是一个线性组合函数&#xff0c;通常表示为&#xff…...

【MySQL】表的基本操作

??表的基本操作 文章目录&#xff1a; 表的基本操作 创建查看表 创建表 查看表结构 表的修改 表的重命名 表的添加与修改 删除表结构 总结 前言&#xff1a; 在数据库中&#xff0c;数据表是存储和组织数据的基本单位&#xff0c;对于数据表的操作是每个程序员需要烂熟…...

项目中使用的是 FastJSON(com.alibaba:fastjson)JSON库

从你的 pom.xml 文件中可以看到&#xff0c;项目明确依赖了以下 JSON 库&#xff1a; FastJSON&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version> </depende…...

Flutter中PlatformView在鸿蒙中的使用

Flutter中PlatformView在鸿蒙中的使用 概述在Flutter中的处理鸿蒙端创建内嵌的鸿蒙视图创建PlatformView创建PlatformViewFactory创建plugin&#xff0c;注册platformview注册插件 概述 集成平台视图&#xff08;后称为平台视图&#xff09;允许将原生视图嵌入到 Flutter 应用…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...