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

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.lryc.cn/news/128622.html

相关文章:

  • centos7 docker离线安装教程
  • 解决爬虫上下行传输效率问题的实用指南
  • Vue2入门学习汇总
  • 收支明细高效管理,轻松查看和统计时间段内的开销收支明细!
  • c++ 成绩统计
  • PostgreSQL-UDF用户自定义函数-扩展插件
  • 接口测试及接口抓包常用测试工具和方法?
  • C语言入门_Day 6布尔数与比较运算
  • Java中的JDBC
  • Vue 安装开发者工具
  • oracle修改临时表出现已使用的事务正在处理临时表问题
  • RestTemplate
  • rabbitMQ服务自动停止(已解决
  • Qt平滑弹出页面
  • 第07天 Static关键字作用及用法
  • Redis扩容与一致性Hash算法解析
  • 【第七讲---视觉里程计1】
  • Linux: sched: might_sleep; 一个调试函数,演变为真实的睡眠函数,实至名归
  • (三) 搞定SOME/IP通信之CommonAPI库
  • windows bat脚本,使用命令行增加/删除防火墙:入站-出站,规则
  • Stable Diffusion 告别复制关键词,高质量提示词自动生成插件
  • 【学习日记】【FreeRTOS】任务调度时如何考虑任务优先级——任务的自动切换
  • C语言暑假刷题冲刺篇——day3
  • Taro+vue3小程序开启分享他人和分享到朋友圈
  • JAVA-Spring中IOC容器是什么?
  • QT多屏显示程序
  • python使用xlwt时,报ValueError: More than 4094 XFs (styles)
  • GitHub 打不开解决方案
  • Java网络编程(一)网络基础
  • matlab使用教程(17)—多项式的定义和运算