vue使用json格式化

news2024/11/24 16:37:48

在这里插入图片描述

安装
npm i bin-code-editor -S
// Vue2
npm install vue-json-viewer --save

在main.js引用


//引入bin-code-editor相关插件和样式
import CodeEditor from 'bin-code-editor';
import 'bin-code-editor/lib/styles/index.css';
import JsonViewer from 'vue-json-viewer'
//vue使用这个插件
Vue.use(CodeEditor);
Vue.use(JsonViewer)

  theme: 'dark',
  showNumber: true,
  lint: true,
  readonly: false,
  wrap: true,
  theme: 'idea',
  jsonformat:{
      expandDepth:5,
      copyable:true
  },
  resultInfo:'',
<b-code-editor v-model="dynamicValidateForm.chartContent" :theme="theme" 
  :auto-format="false" ref="editor" :show-number="showNumber" 
  :readonly="readonly" :lint="lint"/>
<json-viewer
   v-model="hisresult"
   class="jsonview"   
   :expand-depth="jsonformat.expandDepth"  
 >
</json-viewer>

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

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

相关文章

【C++航海王:追寻罗杰的编程之路】引用、内联、auto关键字、基于范围的for、指针空值nullptr

目录 1 -> 引用 1.1 -> 引用概念 1.2 -> 引用特性 1.3 -> 常引用 1.4 -> 使用场景 1.5 -> 传值、传引用效率比较 1.6 -> 值和引用作为返回值类型的性能比较 1.7 -> 引用和指针的区别 2 -> 内联函数 2.1 -> 概念 2.2 -> 特性 3 -…

布局管理和样式表

目录 手动操作 相关功能解释&#xff1a; Qt Designer或者QC中的Spacer控件及其属性 网格布局 代码操作 setFocusPolicy() 如果不进行布局&#xff0c;意味着界面上的东西都是写死的。 当我们进行布局操作之后&#xff0c;控件的位置、大小一般会根据窗口缩放来自动调整。…

计算机设计大赛 深度学习 opencv python 实现中国交通标志识别

文章目录 0 前言1 yolov5实现中国交通标志检测2.算法原理2.1 算法简介2.2网络架构2.3 关键代码 3 数据集处理3.1 VOC格式介绍3.2 将中国交通标志检测数据集CCTSDB数据转换成VOC数据格式3.3 手动标注数据集 4 模型训练5 实现效果5.1 视频效果 6 最后 0 前言 &#x1f525; 优质…

excel怎么设置密码?轻松保护您的工作表

在数字化时代&#xff0c;数据的安全性显得尤为重要。excel作为我们日常工作中广泛使用的办公软件&#xff0c;其中可能包含了大量的敏感数据。为了确保这些数据不被未授权的人访问&#xff0c;本文将为您详细介绍excel怎么设置密码&#xff0c;从而有效地保护您的数据安全。 方…

STM32F407ZGT6——实验9-4 通用定时器脉冲计数实验

一、配置路线 二、问题及反思 配置的时候误以为需要先把【输入捕获配置】了再去配置【从模式】&#xff0c;后面验证了这样配置没办法产生预期的效果。 代码如下&#xff1a;void gtim_timx_cnt_chy_init(uint16_t psc, uint16_t arr) void gtim_timx_cnt_chy_init(uint16_t…

全新魅思V20正规视频影视系统源码/APP+H5视频影视源码

全新魅思V20正规视频影视系统源码&#xff0c;APPH5视频影视源码。会员花费三千购入的&#xff0c;具体搭建教程放压缩包了&#xff01; 有兴趣的下载自行研究吧&#xff0c;搭建一共要用到3个域名&#xff0c;可以拿二级域名搭建。

企业级大模型的护城河:RAG + 微调

围绕LLM的炒作是前所未有的&#xff0c;但这是有道理的&#xff0c;生成式 AI 有潜力改变我们所知道的社会。 在很多方面&#xff0c;LLM将使数据工程师变得更有价值——这令人兴奋&#xff01; 不过&#xff0c;向老板展示数据发现工具或文本到 SQL 生成器的炫酷演示是一回事…

解密数据清洗,SQL中的数据分析

大家好&#xff0c;数据库表中的数据经常会很杂乱。数据可能包含缺失值、重复记录、异常值、不一致的数据输入等&#xff0c;在使用SQL进行分析之前清洗数据是非常重要的。 当学习SQL时&#xff0c;可以随意地创建数据库表&#xff0c;更改它们&#xff0c;根据需要更新和删除…

云原生 k8s 可能使用到的端口整理【不定期更新】

k8s 因为涉及到的组件太多了&#xff0c;所以端口有很多&#xff0c;这里整理了日常所接触的接口&#xff0c;后续有新的再更新。 如果是通过公网 IP 进行安装的时候需要根据实际情况有选择的进行放开&#xff1b;一般只有云厂商会提供公网 IP 访问&#xff0c;自建的话不建议 …

GrayLog踩坑历险记

背景 GrayLog作为ELK的替代产品&#xff0c;是新生代的日志采集框架。在一个采集节点日志的需求中&#xff0c;因为节点很多&#xff0c;产生的日志也很多&#xff0c;因此尝试了使用GrayLog进行日志的采集。下面记录一下使用GrayLog中遇到的坑和解决方案。 一、部署与启动 …

基于YOLOv8的船舶目标检测系统(Python源码+Pyqt6界面+数据集)

博主简介 AI小怪兽&#xff0c;YOLO骨灰级玩家&#xff0c;1&#xff09;YOLOv5、v7、v8优化创新&#xff0c;轻松涨点和模型轻量化&#xff1b;2&#xff09;目标检测、语义分割、OCR、分类等技术孵化&#xff0c;赋能智能制造&#xff0c;工业项目落地经验丰富&#xff1b; …

鸿蒙南向开发——GN快速入门指南

运行GN(Generate Ninja) 运行gn&#xff0c;你只需从命令行运行gn&#xff0c;对于大型项目&#xff0c;GN是与源码一起的。 对于Chromium和基于Chromium的项目&#xff0c;有一个在depot_tools中的脚本&#xff0c;它需要加入到你的PATH环境变量中。该脚本将在包含当前目录的…

空间数据分析和空间统计工具库PySAL入门

空间数据分析是指利用地理信息系统(GIS)技术和空间统计学等方法&#xff0c;对空间数据进行处理、分析和可视化&#xff0c;以揭示数据之间的空间关系和趋势性&#xff0c;为决策者提供有效的空间决策支持。空间数据分析已经被广泛运用在城市规划、交通管理、环境保护、农业种植…

主从数据库MySQL服务重启步骤与注意事项

主从数据库MySQL服务重启步骤与注意事项 实验环境&#xff1a; 172.20.26.34 &#xff08;主应用服务器&#xff09; 172.20.26.26 &#xff08;备应用服务器&#xff09; 172.20.26.37 &#xff08;主库服务器&#xff09; 172.20.26.38 &#xff08;从库服务器&…

Spring Boot 中使用 Spring MVC基础

Spring MVC基础 一、控制器 controller1.定制控制器的方法&#xff08;1&#xff09;接收请求&#xff08;2&#xff09;接收请求参数&#xff08;3&#xff09;返回值 二、模型 Modle三、视图 View四、总结 Spring MVC 是非常著名的 Web 应用框架&#xff0c;现在的大多数 Web…

无需 Root 卸载手机预装软件,精简过的老年机又行了

基础准备 准备目标手机、USB 数据线、以及一台电脑。手机 USB 连接电脑&#xff0c;开发者选项中打开 USB 调试。&#xff08;开发者选项默认隐藏&#xff0c;需要在关于手机中多次点击版本号才能调出&#xff09;。 安装手机驱动&#xff0c;下载安装 ADB 工具包。 开始操作…

Excel得到JSON串

很多时候业务都需要做一种从Excel读取或者导入数据的功能&#xff0c;这在cs程序比较简单&#xff0c;在BS程序上如果封装不好的话那么写起来还是很费劲的&#xff0c;这次封装Excel读取操作。 先看使用 对&#xff0c;你没有看错&#xff0c;就是这么简单。 封装 基础设计…

TensorFlow2实战-系列教程11:RNN文本分类3

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 6、构建训练数据 所有的输入样本必须都是相同shape&#xff08;文本长度&#xff0c;…

Prometheus基于pod部署

1、kube-api的自动发现&#xff1a;Prometheus的容器化部署&#xff08;生产中都是pod部署&#xff09; 2、部署export &#xff08;1&#xff09;创建目录 &#xff08;2&#xff09;创建命名空间 &#xff08;3&#xff09;部署node-export ①9100端口被占用&#xff0c;停…

useEffect的第二个参数

目录 1、第一个参数&#xff1a; 2、第二个参数&#xff1a; 2.1 不传值&#xff1a;无限循环 2.2 空数组作为依赖&#xff1a;执行一次 2.3 基本类型作为依赖&#xff1a;无限循环 2.4 引用类型 2.4.1 数组作为依赖&#xff1a;无限循环 2.4.2 函数作为依赖&#…