vue3安装vue-json-viewer实现json格式化
一、安装插件
直接看效果：json格式化
安装版本不宜过旧也不宜过新，针对vue3安装这个版本即可
yarn add vue-json-viewer;
"dependencies": {
"vue-json-viewer": "3",
},
二、使用插件
import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css";
export default {
components: {
JsonViewer,
},
}
注意的是，这里需要对绑定数据做一个类型校验，对不合法数据类型进行剔除，另外可以自定义格式化框内部的样式
详细实例：
import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css";//引入插件样式
export default {
components: {
JsonViewer,
},
data(){
return{
jsonValue:"",
fontSize：“”，
fontWeight:"",
mainRowHeight:"",
}
},
methods:{
getJSON() {
if (typeof this.jsonValue== "string") {
try {
var obj = JSON.parse(this.jsonValue);
if (typeof obj == "object" && obj) {
return obj;
}
} catch (e) {
console.log("error：" + this.jsonValue+ "!!!" + e);
return "";
}
} else {
return this.jsonValue;
}
},
}
}
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/d255769445.html
相关推荐
-
PDF下载添加水印和访问密码
下载接口 @ApiOperation(value = “下载文件-pdf”, notes = “下载文件pdf版”, httpMethod = “GET”, response = …
-
2024-02-06（Sqoop）
1.Sqoop Apache Sqoop是Hadoop生态体系和RDBMS（关系型数据库）体系之间传递数据的一种工具。 Sqoop工作机制是将导入或者导出命令翻译成MapReduc…
-
删除和清空Hive外部表数据
外部表和内部表区别 未被external修饰的是内部表（managed table），被external修饰的为外部表（external table）； 区别： 内部表数据由Hiv…
-
C#面：using 关键字
using关键字在C#中有两种常见的用法： 命名空间的引用： 使用using关键字可以引用一个命名空间，以便在代码中直接使用该命名空间中的类型，而无需使用完全限定名。 例如，使用u…
-
缓存组件Caffeine的使用
caffeine是一个高性能的缓存组件，在需要缓存数据，但数据量不算太大，不想引入redis的时候，caffeine就是一个不错的选择。可以把caffeine理解为一个简单的red…
-
HiveSQL——借助聚合函数与case when行转列
一、条件函数 if 条件函数 if函数是最常用到的条件函数，其写法是if(x=n,a,b), x=n代表判断条件，如果x=n时，那么结果返回a ,否则返回b。 select…
-
Redis-缓存问题及解决方案
本文已收录于专栏 《中间件合集》 目录 概念说明 缓存问题 缓存击穿 问题描述 解决方案 缓存穿透 问题描述 解决方案 缓存雪崩 问题描述 解决方案 提高缓存可用性 过期时间配置 …
-
【Office】或得单元格中以/分隔的后半部分
【背景】 清洗数据的过程中，需要将一个以斜杠将两个人名分隔的单元格截取后半部分的内容放到新的单元格内。 【公式】 =IF(ISNUMBER(FIND(“/”,C154)),MID(…
-
计网——运输层、端口号
目录 运输层 1 进程之间的通信 运输层的作用 屏蔽作用 可靠信道与不可靠信道 2 运输层的两个主要协议 3 运输层的端口 端口号 (protocol port number) 软…
-
使用REQUESTDISPATCHER对象调用错误页面
使用REQUESTDISPATCHER对象调用错误页面 问题陈述 InfoSuper公司已经创建了一个动态网站。发生错误时，浏览器中显示的堆栈跟踪很难理解。公司的系统分析师Davi…
