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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

golang开源的可嵌入应用程序高性能的MQTT服务

golang开源的可嵌入应用程序高性能的MQTT服务 什么是MQTT&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的、开放的消息传输协议&#xff0c;设计用于在低带宽、高延迟或不可靠的网络环境中进行通信。MQTT最初由IBM开发&#xf…

python webdriver 测试框架数据驱动json文件驱动的方式

简介&#xff1a; 数据驱动excel驱动方式,就是数据配置在excel里面&#xff0c;主程序调用的时候每次用从excel里取出的数据作为参数&#xff0c;进行操作&#xff0c; 需要掌握的地方是对excel的操作&#xff0c;要灵活的找到目标数据 测试数据.xlsx: 路径-D:\test\0627 E…

产品原型图设计规范大全

目前&#xff0c;市场上许多产品经理或设计师都在使用一些优秀的原型设计规范&#xff0c;这些规范几乎涵盖了原型设计的许多方面。一套好的、完整的原型设计规范可以统一产品设计风格&#xff0c;检验产品的可用性&#xff0c;有效提高产品经理绘制原型图的效率&#xff0c;更…

力扣238. 除自身以外数组的乘积(前后缀和)

Problem: 238. 除自身以外数组的乘积 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1&#xff1a; 1.先求取数组的包括当前下标值得前后缀乘积&#xff08;利用两个数组记录下来分别为leftProduct和rightProduct&#xff09; 2.当求取一个下标为i的数组中的元素&#x…

构建基于Flask的跑腿外卖小程序

跑腿外卖小程序作为现代生活中的重要组成部分&#xff0c;其技术实现涉及诸多方面&#xff0c;其中Web开发框架是至关重要的一环。在这篇文章中&#xff0c;我们将使用Python的Flask框架构建一个简单的跑腿外卖小程序的原型&#xff0c;展示其基本功能和实现原理。 首先&…

linux --中断管理 -- irq的自动探测机制

irq自动探测机制 如果一个设备的驱动程序无法确定它说管理的设备的软件中断号irq&#xff0c;此时设备驱动程序可以使用irq的自动探测机制来获取其正在使用的irq。 使用自动探测机制的条件 内核与驱动&#xff0c;必须共同努力才能完成只限于非共享中断的情况 探测前&#…

如何查看某一页面在在谷歌有哪些关键词

随着跨境贸易的不断发展&#xff0c;谷歌SEO也被越来越多的人群所了解&#xff0c;所接受。我们在日常操作SEO的时候&#xff0c;往往都会远见这样的事情&#xff0c;那就是自己网站的某一个页面原本只是简单的承载着某一个关键词&#xff0c;但是随着时间的推移&#xff0c;这…

Shell脚本之 -------------免交互操作

一、Here Document 1.Here Document概述 Here Document 使用I/O重定向的方式将命令列表提供给交互式程序 Here Document 是标准输 入的一种替代品&#xff0c;可以帮助脚本开发人员不必使用临时文件来构建输入信息&#xff0c;而是直接就地 生产出一个文件并用作命令的标准…

Linux——动静态库

在进行开发过程中&#xff0c;我们不可避免地会使用到人家的库&#xff0c;那么库到底是什 么&#xff1f;而库又分为动态库和静态库&#xff0c;那么这两个又是什么&#xff1f;这篇博客由我来 简单介绍动静态库。文章目录 1. 库2. 静态库a. 静态库的制作b. 使用静态库 3. 动态…

打击者H5小游戏

欢迎来到程序小院 打击者 玩法&#xff1a;点击飞机上下左右移动躲过子弹射击&#xff0c;打掉上方敌人飞机&#xff0c; 遇到药包会增加能量&#xff0c;弹药包会升级武器&#xff0c;快去射击吧^^。开始游戏https://www.ormcc.com/play/gameStart/262 html <div id"…

基于矢量控制的交流电机驱动simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 交流电机基础 4.2 矢量控制原理 4.3 矢量控制的实现 5.完整工程文件 1.课题概述 基于矢量控制的交流电机驱动simulink建模与仿真。系统仿真输出电压&#xff0c;电流&#xff0c;电机转速以及扭矩…

语言革命:NLP与GPT-3.5如何改变我们的世界

文章目录 &#x1f4d1;前言一、技术进步与应用场景1.1 技术进步1.2 应用场景 二、挑战与前景三、伦理和社会影响四、实践经验五、总结与展望 &#x1f4d1;前言 自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是人工智能领域的一个重要分支…

快速入门存内计算—助力人工智能加速深度学习模型的训练和推理

存内计算&#xff1a;提高计算性能和能效的新技术 传统的计算机架构是将数据存储在存储器中&#xff0c;然后将数据传输到计算单元进行处理。这种架构存在一个性能瓶颈&#xff0c;即数据传输延迟。存内计算通过将计算单元集成到存储器中&#xff0c;消除了数据传输延迟&#…

中国的茶文化:现代生活中的茶文化

中国的茶文化&#xff1a;现代生活中的茶文化 引言 在现代社会的快节奏生活中&#xff0c;茶文化并未随时间流逝而褪色&#xff0c;反而以其独特的方式融入了全球各地人们的日常生活。它超越了饮品本身的范畴&#xff0c;成为一种连接历史、人文与现代生活方式的艺术形式。本文…

Git 介绍 与 配置

Git 介绍 Git是一个分布式版本控制系统&#xff0c;用于跟踪文件的更改和协作开发。它可以管理项目的版本历史记录&#xff0c;并允许多个开发者在同一时间进行并行开发。 解决上图产生的问题就出现了git 分布式版本控制系统 看下图 Git 配置 Git的基本配置包括用户名和电子邮…

Linux split命令 切割文件

目录 一. 主要配置项二. 按照行数切割文件三. 按照指定大小切割文件 一. 主要配置项 ⏹将文件按照行数或者大小切割为若干份小文件&#xff0c;主要作用就是用来切割文件 -l&#xff1a;表示将文件按照行分割-d&#xff1a;表示使用数字作为分割后的文件名后缀, 而不是默认的…

BUUCTF-Real-[ThinkPHP]5-Rce

1、ThinkPHP检测工具 https://github.com/anx0ing/thinkphp_scan 漏洞检测 通过漏洞检测&#xff0c;我们发现存在rce漏洞&#xff01; 2、漏洞利用 ---- [!] Name: Thinkphp5 5.0.22/5.1.29 Remote Code Execution VulnerabilityScript: thinkphp5022_5129.pyUrl: http://n…

跟着cherno手搓游戏引擎【16】Camera和Uniform变量的封装

相机封装&#xff1a; OrthographicCamera.h: #pragma once #include <glm/glm.hpp> namespace YOTO {class OrthographicCamera{public:OrthographicCamera(float left,float right , float bottom,float top);const glm::vec3& GetPosition()const { return m_Pos…

阿赵UE学习笔记——13、贴花

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的使用。这次介绍一种特殊的材质类型&#xff0c;贴花。 一、获取贴花资源 在没有分析贴花的原理之前&#xff0c;可以先去获得一些免费的贴花资源来使用&#xff0c;比如在Quixel上面就有专门的一个资源…

rp-bf:一款Windows下辅助进行ROP gadgets搜索的Rust库

关于rp-bf rp-bf是一款Windows下辅助进行ROP gadgets搜索的Rust库&#xff0c;该工具可以通过模拟Windows用户模式下的崩溃转储来爆破枚举ROP gadgets。 在很多系统安全测试场景中&#xff0c;研究人员成功劫持控制流后&#xff0c;通常需要将堆栈数据转移到他们所能够控制的…
最新文章