json数据转换

js插件:
https://github.com/josdejong/jsoneditor

在vue中使用:
1.下载

npm install jsoneditor

auditLog.vue:
在vue里面写一个id为"jsoneditor"的div,组件就展示在这个div里面

<div id="jsoneditor" style="width: 50%; height: 500px"></div>

auditLog.js:
detailDialog 是我写在弹窗里面的,visible是打开弹窗,可忽略
首先引入组件的js以及css
通过document.getElementById找到名为jsoneditor的div
new 一个 JSONEditor对象
initialJson里面放数据
最后再editor.set出去

//详情弹窗
let visible = ref(false)
const detailDialog = () => {visible.value = truesetTimeout(() => {let JSONEditor = require("jsoneditor/dist/jsoneditor.js")require("jsoneditor/dist/jsoneditor.min.css")console.log(JSONEditor)const container = document.getElementById("jsoneditor")const options = {}const editor = new JSONEditor(container, options)// set jsonconst initialJson = {"Array": [1, 2, 3],"Boolean": true,"Null": null,"Number": 123,"Object": {"a": "b","c": "d"},"String": "Hello World"}editor.set(initialJson)// get jsonconst updatedJson = editor.get()}, 300)
}

json数据转换工具-js相关推荐

  1. json数据转换成表格_电子表格会让您失望吗? 将行数据转换为JSON树很容易。

    json数据转换成表格 Like many of you, I often have to take the result of SQL queries and convert the rowsets ...

  2. 使用 pqgrid 将JSON数据转换成TABLE

    使用 pqgrid 将JSON数据转换成TABLE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: ...

  3. 从零开始编写一个微信小程序(微信开发者工具+JS+WuxUI组件库+云开发)万字整理,建议收藏!

    微信小程序-魔镜 笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示 视频演示 经历了一次升级之后,我的小程序怎么样了? 文章目录 微信小程序-魔镜 笔记&源码(微信开发 ...

  4. arcgis Card Conversion Tools(数据转换工具介绍)

    Card Conversion Tools(转换工具) 工具箱介绍 Arcgis Conversion Tools 提供了当下绝大多数地理空间数据和地理属性数据的各种数据格式之间的转换,我们常用的且移 ...

  5. 在线MySQL,SQL Server建表语句生成JSON测试数据工具

    在线MySQL,SQL Server建表语句生成JSON测试数据工具 在线MySQL,SQL Server建表语句生成JSON测试数据工具 本工具可以将SQL建表语句生成JSON测试数据,支持MySQ ...

  6. json数据转换成excel表格

    在工作中遇到 一个需要把json数据转换成excel的功能,于是网上去搜索在线的工具,还蛮多的, 找了一大圈都不是特别满意,很多都是转了之后就是一个排列好的数据,需要自己复制到excel,类似下图这样 ...

  7. excel转json对象工具推荐

    excel转json对象工具推荐 在工作中,有时候会遇到需要把excel写成表格的情况出现,如果一个个写实在是太浪费时间了,在摸索的过程中发现一个实用的工具:表格数据转换工具 具体的操作步骤 如下图所 ...

  8. 【Springboot】Json转换工具

    HttpClient请求数据后是json字符串,需要我们自己把Json字符串反序列化为对象,我们会使用JacksonJson工具来实现. JacksonJson是SpringMVC内置的json处理工 ...

  9. js跨域调用php接口,php的json格式和js跨域调用的代码

    function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage ...

  10. php 跨域 json,PHP json格式和js json格式 js跨域调用实现代码

    先看一个js函数 function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy' ...

最新文章

  1. 关于std::string 在 并发场景下 __grow_by_and_replace free was not allocated 的异常问题
  2. angular指令ng-class巧用
  3. iOS开发JSON字符串和字典互转
  4. RabbitMQ (十五) 镜像集群 + HAProxy1.7.8 负载均衡
  5. PHP爬取企业详情(百度信用)
  6. [国家集训队]middle
  7. php 取字符串的数字,php提取字符串中的数字
  8. 漫步最优化十五——凸函数优化
  9. MySQL在Windows和Linux减少数据库
  10. 使用Apache的ab工具进行压力测试
  11. 4.你认为一些军事方面的软件系统采用什么样的开发模型比较合适?
  12. js高级学习笔记(b站尚硅谷)-1-数据类型
  13. Chrome浏览器离线安装包下载方法
  14. 移动硬盘启动win7蓝屏7b_win7启动蓝屏0X0000007B代码的解决方法
  15. bugku misc disordered_zip
  16. android ios相机,曝苹果iOS13相机加入了这项功能 安卓上早就有了
  17. 学计算机编程难吗,电脑编程难学吗 如何才能学好电脑编程
  18. 基于SSM框架实现的日记管理系统
  19. 【排队助手】投屏模式-使用指南
  20. netfilter连接跟踪(conntrack)详述

热门文章

  1. 关于Tapestry5中的配置项的说明
  2. Grails Quartz插件 定时调度任务
  3. 【原创】CentOS8最小化安装中系统命令,看你能认识几个
  4. visualboyadvance滤镜_研究VisualBoyAdvance的请进
  5. 数据挖掘导论——分类与预测
  6. 遥感常用数据下载链接
  7. 《21天学通Java(第7版)》——VC程序员的学习笔记2
  8. 2022全新【趣盒】iapp源码带后台非常好看
  9. 开涛传–记京东“首席”架构师张开涛
  10. SAE J1939学习笔记(一)