vue使用json格式化

在这里插入图片描述

安装
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-viewerv-model="hisresult"class="jsonview"   :expand-depth="jsonformat.expandDepth"  >
</json-viewer>

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

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

相关文章

单片机驱动多个ds18b20

目录 1设计内容 2ds18b20介绍 2.1传感器引脚及原理图 2.2寄存器配置 3程序实现 3.1配置初始化 3.2配置寄存器 3.3ROM读取 3.4温度读取 1设计内容 通过51单片机&#xff0c;读取总线上挂载的多个ds18b20的温度信息。 如下图&#xff0c;成功读取到3路温度数据。 2ds18…

[docker] Docker容器服务更新与发现之consul

一、consul的相关知识 1.1 什么是注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&#xff0c;也不考虑服务的压力承载&#xff0c;服务之间调用单纯的通过接口访问。直到后来出现了多个节点的分布式架构&#…

百度百舸平台的大模型训练最佳实践

今天的分享是百度智能云在 23 年夏季推出的「云智公开课 — AI 大底座系列」第 8 期&#xff0c;也是本次活动的最后一期。前面 7 期的内容&#xff0c;我的同事对大模型场景涉及到的各个模块&#xff0c;从网络、计算、存储、向量数据库、AI 框架、LMOps 等维度&#xff0c;为…

【网络奇遇记】探索网络世界的奥秘:计算机网络导论|章末总结

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、数据结构 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️信息时代的计算机网络1.1 本文目录 二. ⛳️因特网的概述2.1 本文目录2.2…

Redis学习——高级篇⑥

Redis学习——高级篇⑥ Redis7高级之简单实现布隆过滤器BloomFilter &#xff08;七&#xff09; 7 布隆过滤器1. 是什么2.能干嘛3.实现原理和数据结构4.使用三步骤5.尝试手写简单的布隆过滤器&#xff0c;结合bitmap1.整体架构2.步骤设计3 springboot redis mybatis布…

springBoot - mybatis 多数据源实现方案

应用场景: 多数据源 小型项目 或者 大项目的临时方案中比较常用.在日常开发中,可能我们需要查询多个数据库,但是数据库实例不同,导致不能通过 指定schema的方式 区分不同的库, 这种情况下就需要我们应用程序配置多数据源 实现方式: 首先自定义实现 datasource数据源 为当前…

ASTORS国土安全奖:ManageEngine AD360荣获银奖

美国安全今日&#xff08;AST&#xff09;的年度“ASTORS”国土安全奖计划是一个备受瞩目的活动&#xff0c;致力于突显国土安全领域的创新与进步。这一奖项旨在表彰在保护国家免受安全威胁方面做出卓越贡献的个人和组织。该计划汇聚了执法、公共安全和行业领袖&#xff0c;不仅…

【Godot4自学手册】第十节将场景添加到TileSet绘制背景,主人公走到房子后面房子变得半透明

这节主要学习将场景添加到TileSet作为TileMap来搭建背景。同时&#xff0c;主人公进入房子后面&#xff0c;房子变得半透明&#xff0c;离开房子后房子变的不透明。 一、创建新场景 首先导入房子素材&#xff0c;最终文件系统内容如下&#xff1a; 点击新建场景按钮&#x…

MATLAB - 控制小车上的倒立摆

系列文章目录 前言 一、小车 - 摆杆 小车 - 摆杆模型如图 1 所示&#xff0c;使用 Simscape™ Multibody™ 在 Simulink 中建模。 图 1&#xff1a;小车上的倒立摆 图 2&#xff1a;Simscape 多体模型 该系统通过对小车施加可变力 进行控制。控制器需要在将小车移动到新位置或…

【LLM多模态】Cogview3、DALL-E3、CogVLM、CogVideo模型

note 文章目录 noteVisualGLM-6B模型图生文&#xff1a;CogVLM-17B模型1. 模型架构2. 模型效果 文生图&#xff1a;CogView3模型DALL-E3模型CogVideo模型网易伏羲-丹青模型Reference VisualGLM-6B模型 VisualGLM 是一个依赖于具体语言模型的多模态模型&#xff0c;而CogVLM则是…

【代码随想录】刷题笔记Day56

前言 26回了老家参加二姨的婚礼&#xff0c;还逛了几圈亲戚&#xff0c;回来就接家教的活&#xff0c;想到还要刷题开组会&#xff0c;回家注定是没法怎么休息啦&#xff0c;可恶 42. 接雨水 - 力扣&#xff08;LeetCode&#xff09; 暴力解法&#xff08;双指针优化&#xf…

Kafka核心概念、数据存储设计及Partition数据文件 生产者负载均衡策略、批量发送技巧、消息压缩手段、消费者设计

关注公众号&#xff0c;发送 “面试题” 即可免费领取一份超全的面试题PDF文件&#xff01;&#xff01;&#xff01;&#xff01; 1、kafka的概念 Kafka 是一个开源的分布式流处理平台&#xff0c;最初由LinkedIn开发&#xff0c;后来成为Apache软件基金会的一个顶级项目。它…

SpringAop实现访问日志功能的添加

AOP 是 Spring 体系中非常重要的两个概念之一&#xff08;另外一个是 IoC&#xff09;&#xff0c;今天这篇文章就来带大家通过实战的方式&#xff0c;在编程猫 SpringBoot 项目中使用 AOP 技术为 controller 层添加一个切面来实现接口访问的统一日志记录。 #一、关于 AOP AO…

讯飞星火V3.5发布,一场大模型的奇幻之旅(深度体验讯飞星火V3.5)

在去年的人工智能领域&#xff0c;大模型无疑是最炙手可热的技术话题。其强大的数据处理和深度学习能力&#xff0c;为众多领域带来了革命性的变革。而其中&#xff0c;讯飞星火表现尤为出色&#xff0c;成为了行业的翘楚&#xff0c;得到了大量的用户认可&#xff0c;其中&…

day38 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

动态规划是前一个状态推导过来的&#xff0c;贪心是局部最优解。 class Solution { public:int fib(int n) {int a0;int b1;int res0;if(n1) return 1;for(int i2;i<n;i){resab;ab;bres;}return res;} }; 可以由前面状态推出后面状态&#xff0c;是动态规划。由于始终只要后…

C++20 协程原理与应用

协程 要想了解协程&#xff0c;最好先搞清楚进程&#xff0c;线程&#xff0c;这样才能将三者区分开来&#xff01; 进程 vs 线程 vs 协程 进程线程协程切换者操作系统操作系统用户&#xff08;编程者&#xff09;切换时机根据操作系统自己的切换策略&#xff0c;用户不感知根…

最小化安装BCLinux-for-Euler-21.10-dvd-x86_64-230731版

本文记录最小化安装BCLinux-for-Euler-21.10-dvd-x86_64-230731版。 一、镜像获取 1、下载镜像 移动云官方网站 最新镜像为2023-11-02 15:04:56更新的BCLinux-for-Euler-21.10-dvd-x86_64-230731版 直接下载地址&#xff1a;https://mirrors.cmecloud.cn/bclinux/oe21.10/I…

【Linux】线程池的简易实现(懒汉模式)

文章目录 前言一、懒汉方式1.普通模式1.线程安全模式 二、源代码1.Task.hpp(要执行的任务)2.ThreadPool.hpp(线程池)3.Main.cpp 前言 线程池: 一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而线程池维护着多个线程&#xff0c;等待着监…

java之mybatis入门

大前题 正确创建好了springboot工程&#xff0c;极其依赖 配置数据库连接 application.yml spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/cangqiongusername: rootpassword: rootlombok Data 自动生成代码&#xff08…

【免费分享】概率神经网络的分类预测--基于PNN的变压器故障诊断

主要内容 ​《MATLAB神经网络43个案例分析》共有43章&#xff0c;内容涵盖常见的神经网络&#xff08;BP、RBF、SOM、Hopfield、Elman、LVQ、Kohonen、GRNN、NARX等&#xff09;以及相关智能算法&#xff08;SVM、决策树、随机森林、极限学习机等&#xff09;。同时&#x…