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 基本属性
| Property | Description | Type | Default |
|---|---|---|---|
| data(v-model) | JSON数据,支持v-model使用时可编辑 | JSON object | - |
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | - |
| deep | 大于此深度的路径将被折叠 | number | - |
| showLength | 显示折叠时的长度 | boolean | false |
| showLine | 显示连接线 | boolean | true |
| showLineNumber | 显示行号 | boolean | false |
| showIcon | 显示图标 | boolean | false |
| showDoubleQuotes | 在键上显示双引号 | boolean | true |
| virtual | 使用虚拟滚动条 | boolean | false |
| height | 使用virtual时列表的高度 | number | 400 |
| itemHeight | 使用virtual时节点的高度 | number | 20 |
| selectedValue(v-model) | 选择的数据路径 | string, array | - |
| rootPath | 根节点路径 | string | root |
| nodeSelectable | 定义节点是否支持选择 | (node) => boolean | - |
| selectableType | 支持路径选择,默认无 | multiple | single |
| showSelectController | 显示选择控制器 | boolean | false |
我更喜欢使用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中引入,然后直接在组件中使用 import { createApp } from vue import App from ./App.vue import JsonViewer from "vue3…...
python转转商超书籍信息爬虫
1基本理论 1.1概念体系 网络爬虫又称网络蜘蛛、网络蚂蚁、网络机器人等,可以按照我们设置的规则自动化爬取网络上的信息,这些规则被称为爬虫算法。是一种自动化程序,用于从互联网上抓取数据。爬虫通过模拟浏览器的行为,访问网页并…...
Spring Boot 中的 InitializingBean:Bean 初始化背后的故事
在 Spring Boot 应用中,Bean 的生命周期管理至关重要。InitializingBean 接口允许 Bean 在完成属性注入后执行自定义初始化逻辑。本文将深入探讨 InitializingBean 接口在 Spring Boot 中的应用,揭示其工作原理,并分享一些最佳实践࿰…...
微信小程序:实现单选,多选,通过变量控制单选/多选
一、实现单选功能 微信小程序提供了 radio 组件来实现单选功能。radio 组件需要配合 radio-group 使用。 1. WXML 代码 <radio-group bindchange"onRadioChange"><label wx:for"{{items}}" wx:key"id"><radio value"{{it…...
MOS怎样选型,步骤详解
一:选用N沟道还是P沟道 为设计选择正确器件的第一步是决定采用N沟道还是P沟道MOSFET。在典型的功率应用中,当一个MOSFET接地,而负载连接到干线电压上时,该MOSFET就构成了低压侧开关。在低压侧开关中,应采用N沟道M…...
CMake技术细节:解决未定义,提供参数
初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github:codetoys,所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的,可以在任何平台上使用。 源码指引:github源…...
1688 满足跨境业务需求而提供的一组 API 接口
1688 跨境属性接口系列是 1688 开放平台为满足跨境业务需求而提供的一组 API 接口,其中最主要的是1688.item_get : 一:1688.item_get接口 接口功能:主要用于查询 1688 商品的跨境属性,为开发者和商家提供了获取商品跨境关键信息…...
物联网网关Web服务器--CGI开发实例BMI计算
本例子通一个计算体重指数的程序来演示Web服务器CGI开发。 硬件环境:飞腾派开发板(国产E2000处理器) 软件环境:飞腾派OS(Phytium Pi OS) 硬件平台参考另一篇博客:国产化ARM平台-飞腾派开发板…...
计算机网络 (51)鉴别
前言 计算机网络鉴别是信息安全领域中的一项关键技术,主要用于验证用户或信息的真实性,以及确保信息的完整性和来源的可靠性。 一、目的与重要性 鉴别的目的是验明用户或信息的正身,对实体声称的身份进行唯一识别,以便验证其访问请…...
【Docker】搭建一个功能强大的自托管虚拟浏览器 - n.eko
前言 本教程基于群晖的NAS设备DS423的docker功能进行搭建,DSM版本为 DSM 7.2.2-72806 Update 2。 n.eko 支持多种类型浏览器在其虚拟环境中运行,本次教程使用 Chromium 浏览器镜像进行演示,支持访问内网设备和公网地址。 简介 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图像生成体验
目录 简介🌟 主要特点📥 安装步骤1. 下载2. 配置环境和安装依赖3. 模型目录说明 🚀 运行 Stable-Diffusion-Webui-Forge1. 进入项目目录2. 运行项目3. 打开页面 🎨 使用体验常见问题📝 小结 简介 Stable-Diffusion-We…...
Redis使用基础
1 redis介绍 Redis(Remote Dictionary Server ),即远程字典服务 ! 是完全开源的,遵守 BSD 协议,是一个高性能的 key-value 数据库。 使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并…...
PyCharm+RobotFramework框架实现UDS自动化测试- (四)项目实战0x10
1.环境搭建 硬件环境:CANoe、待测设备(包含UDS诊断模块) 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(传输控制协议)是一个复杂的协议,其设计和实现涉及多个RFC文档。以下是一些与TCP协议密切相关的RFC文档列表,按照时间顺序排列,涵盖了从基础定义到高级特性和优化的各个方面: 基…...
【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)公式推导
### 逻辑回归的损失函数 逻辑回归模型用于分类问题,其输出是一个概率值。对于二分类问题,逻辑回归模型的输出可以表示为: \[ P(y 1 | x) \frac{1}{1 e^{-F(x)}} \] 其中 \( F(x) \) 是一个线性组合函数,通常表示为ÿ…...
【MySQL】表的基本操作
??表的基本操作 文章目录: 表的基本操作 创建查看表 创建表 查看表结构 表的修改 表的重命名 表的添加与修改 删除表结构 总结 前言: 在数据库中,数据表是存储和组织数据的基本单位,对于数据表的操作是每个程序员需要烂熟…...
项目中使用的是 FastJSON(com.alibaba:fastjson)JSON库
从你的 pom.xml 文件中可以看到,项目明确依赖了以下 JSON 库: FastJSON: <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version> </depende…...
Flutter中PlatformView在鸿蒙中的使用
Flutter中PlatformView在鸿蒙中的使用 概述在Flutter中的处理鸿蒙端创建内嵌的鸿蒙视图创建PlatformView创建PlatformViewFactory创建plugin,注册platformview注册插件 概述 集成平台视图(后称为平台视图)允许将原生视图嵌入到 Flutter 应用…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
