Vue3 使用json编辑器

安装

npm install json-editor-vue3

main中引入

main.js 中加入下面代码

import "jsoneditor";

不然会有报错,如jsoneditor does not provide an export named ‘default’。 图片信息来源-github
在这里插入图片描述

代码示例


<template><json-editor-vue class="editor" v-model="jsonobj" @blur="remarkValidate" currentMode="text" :modeList="modeList":options="options" />
</template><script setup>
import JsonEditorVue from 'json-editor-vue3';
import { ref } from 'vue'const jsonstr = ref("{ \"a\": 8, \"b\": \"2\", \"c\":8, \"d\":9, \"f\":99 }");
const jsonobj = ref(JSON.parse(jsonstr.value));const options = ref({search: false,history: false,
})
const modeList= ref(["text", "view", "tree", "code", "form"]) // 可选模式const remarkValidate = () => {let newjsonstr = JSON.stringify(jsonobj.value);console.log("remarkValidate", jsonobj.value, newjsonstr, jsonstr.value);if (jsonstr.value == newjsonstr) {console.log("no change")} else {jsonstr.value = newjsonstr}
}
</script>

补充说明

json-editor-vue3支持多种配置,如可选模式(多选)modeList、初始模式currentMode,历史记录开关history,搜索功能开关search等, 上面示例代码已做部分配置实验,具体可以参考github的配置介绍。

运行结果

![在这里插入图片描述](https://img-blog.csdnimg.cn/3fa27463c42740bc9109d6c6cfb184c1.pn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/41029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL | 分组数据

10-分组数据 两个新的select子句&#xff1a;group by子句和having子句。 10.1-数据分组 上面我们学到了&#xff0c;使用SQL中的聚集函数可以汇总数据&#xff0c;这样&#xff0c;我们就能够对行进行计数&#xff0c;计算和&#xff0c;计算平均数。 目前为止&#xff0c…

ESP-C3入门21. I2C接口点亮1306驱动的OLED屏

ESP-C3入门21. 点亮1306驱动的OLED屏 一、Espressif/ssd1306 驱动简介1. 驱动介绍2. OLED充电泵概念 二、I2C 通讯步骤1. 初始化 I2C 总线 (i2c_master_init()函数)&#xff1a;2. 创建 I2C 命令句柄 (i2c_cmd_handle_t cmd i2c_cmd_link_create())&#xff1a;3. 发送启动信号…

【C#】获取电脑CPU、内存、屏幕、磁盘等信息

通过WMI类来获取电脑各种信息&#xff0c;参考文章&#xff1a;WMI_04_常见的WMI类的属性_wmi scsilogicalunit_fantongl的博客-CSDN博客 自己整理了获取电脑CPU、内存、屏幕、磁盘等信息的代码 #region 系统信息/// <summary>/// 电脑信息/// </summary>public p…

flinksql报错 Cannot determine simple type name “org“

flink版本 1.15 报错内容 2023-08-17 15:46:02 java.lang.RuntimeException: Could not instantiate generated class WatermarkGenerator$0at org.apache.flink.table.runtime.generated.GeneratedClass.newInstance(GeneratedClass.java:74)at org.apache.flink.table.runt…

低功耗、5Mbps、RS-422 接口电路MS2583/MS2583M

MS2583/MS2583M 是一款低功耗、 5Mbps 、高 ESD 能力的 RS422 通讯接口电路。 在接收状态下&#xff0c;其功耗仅为 0.3mA 左右。 A/B 端 ESD 耐压可达 15kV &#xff0c;且无自激现象。当输出短路发生大电 流导致电路温度过高时&#xff0c;开启内部过温保护电路&…

go 使用 make 初始化 slice 切片使用注意

go 使用 make 初始化 slice 切片 时指定长度和不指定长度的情况 指定长度 package mainimport "fmt"func main() {s1 : make([]int, 5)data : []int{1, 2, 3}for _, v : range data {s1 append(s1, v)}fmt.Println(s1) }// 以上代码会输出 // [0 0 0 0 0 1 2 3] //…

vue中的路由缓存和解决方案

路由缓存的原因 解决方法 推荐方案二&#xff0c;使用钩子函数beforeRouteUpdate&#xff0c;每次路由更新前执行

手写spring笔记

手写spring笔记 《Spring 手撸专栏》笔记 IoC部分 Bean初始化和属性注入 Bean的信息封装在BeanDefinition中 /*** 用于记录Bean的相关信息*/ public class BeanDefinition {/*** Bean对象的类型*/private Class beanClass;/*** Bean对象中的属性信息*/private PropertyVal…

MFC第三十天 通过CToolBar类开发文字工具栏和工具箱、GDI+边框填充以及基本图形的绘制方法、图形绘制过程的反色线模型和实色模型

文章目录 CControlBar通过CToolBar类开发文字工具栏和工具箱CMainFrame.hCAppCMainFrm.cppCMainView.hCMainView.cppCEllipse.hCEllipse.cppCLine.hCLine.cppCRRect .hCRRect .cpp CControlBar class AFX_NOVTABLE CControlBar : public CWnd{DECLARE_DYNAMIC(CControlBar)pro…

OC调用Swift编写的framework

一、前言 随着swift趋向稳定&#xff0c;越来越多的公司都开始用swift来编写苹果相关的业务了&#xff0c;关于swift的利弊这里就不多说了。这里详细介绍OC调用swift编写的framework库的步骤 二、制作framework 1、新建项目&#xff0c;选择framework 2、填写framework的名称…

AutoHotkey:定时删除目录下指定分钟以前的文件,带UI界面

删除指定目录下&#xff0c;所有在某个指定分钟以前的文件&#xff0c;可以用来清理经常生成很多文件的目录&#xff0c;但又需要保留最新的一部分文件 支持拖放目录到界面 能够记忆设置&#xff0c;下次启动后不用重新设置&#xff0c;可以直接开始 应用场景比如&#xff1a…

WinForm内嵌Unity3D

Unity3D可以C#脚本进行开&#xff0c;使用vstu2013.msi插件&#xff0c;可以实现在VS2013中的调试。在开发完成后&#xff0c;由于项目需要&#xff0c;需要将Unity3D嵌入到WinForm中。WinForm中的UnityWebPlayer Control可以载入Unity3D。先看效果图。 一、为了能够动态设置ax…

【boost网络库从青铜到王者】第五篇:asio网络编程中的同步读写的客户端和服务器示例

文章目录 1、简介2、客户端设计3、服务器设计3.1、session函数3.2、StartListen函数3、总体设计 4、效果测试5、遇到的问题5.1、服务器遇到的问题5.1.1、不用显示调用bind绑定和listen监听函数5.1.2、出现 Error occured!Error code : 10009 .Message: 提供的文件句柄无效。 [s…

Failed to execute goal org.apache.maven.plugins

原因&#xff1a; 这个文件D:\java\maven\com\ruoyi\pg-student\maven-metadata-local.xml出了问题 解决&#xff1a; 最简单的直接删除D:\java\maven\com\ruoyi\pg-student\maven-metadata-local.xml重新打包 或者把D:\java\maven\com\ruoyi\pg-student这个目录下所有文件…

性能测试场景设计

性能测试场景设计&#xff0c;是性能测试中的重要概念&#xff0c;性能测试场景设计&#xff0c;目的是要描述如何执行性能测试。 通常来讲&#xff0c;性能测试场景设计主要会涉及以下部分&#xff1a; 并发用户数是多少&#xff1f; 测试刚开始时&#xff0c;以什么样的速率…

Spring WebFlux 的详细介绍

Spring WebFlux 是基于响应式编程的框架&#xff0c;用于构建异步、非阻塞的 Web 应用程序。它是Spring框架的一部分&#xff0c;专注于支持响应式编程范式&#xff0c;使应用程序能够高效地处理大量的并发请求和事件。 以下是关于 Spring WebFlux 的详细介绍&#xff1a; 1. *…

go入门实践五-实现一个https服务

文章目录 前言生成证书申请免费的证书使用Go语言生成自签CA证书 https的客户端和服务端服务端代码客户端代码 tls的客户端和服务端服务端客户端 前言 在公网中&#xff0c;我想加密传输的数据。(1)很自然&#xff0c;我想到了把数据放到http的请求中&#xff0c;然后通过tls确…

2023年京东宠物食品行业数据分析(京东大数据)

宠物食品市场需求主要来自于养宠规模&#xff0c;近年来由于我国宠物数量及养宠人群的规模均在不断扩大&#xff0c;宠物相关产业和市场规模也在蓬勃发展&#xff0c;宠物食品市场也同样保持正向增长。 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;2023年1月-7月&am…

vue5种模糊查询方式

在Vue中&#xff0c;有多种方式可以实现模糊查询。以下是五种常见的模糊查询方式&#xff1a; 使用JavaScript的filter()方法&#xff1a;使用filter()方法可以对数组进行筛选&#xff0c;根据指定的条件进行模糊查询。例如&#xff1a; data() {return {items: [{ name: App…

接口自动化测试(添加课程接口调试,调试合同上传接口,合同列表查询接口,批量执行)

1、我们把信息截取一下 1.1 添加一个新的请求 1.2 对整个请求进行保存&#xff0c;Ctrl S 2、这一次我们添加的是课程添加接口&#xff0c;以后一个接口完成&#xff0c;之后Ctrl S 就能够保存 2.1 选择方法 2.2 设置请求头&#xff0c;参数数据后期我们通过配置设置就行 3、…