vue使用vue-json-viewer展示JSON数据的详细步骤
更新时间：2022年09月01日 12:00:14 作者：接着奏乐接着舞。
最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,下面这篇文章主要给大家介绍了vue使用vue-json-viewer展示JSON数据的相关资料,需要的朋友可以参考下
1.下载
npm下载：
// Vue2 npm install vue-json-viewer@2 --save // Vue3 npm install vue-json-viewer@3 --save
yarn下载：
// Vue2 yarn add vue-json-viewer@2 // Vue3 yarn add vue-json-viewer@3
2.引入并全局注册
在main.js（入口文件里面）
import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer)
3.组件内使用
jsonData就是你想要渲染的数据
<json-viewer :value="jsonData"></json-viewer>
假数据供测试效果：
data(){
return {
jsonData:{
name:"小明",
age:18,
items：{
like:"pingpang",
skip:0
}
}
}
}效果图：
4.一点使用技巧、心得
在使用类似插件的时候，先写假数据，如果能正常渲染，那就将后端的数据处理成假数据一样的格式。
另外，前端处理JSON数据一般使用JSON.parse()、eval()或者JSON.stringify()方法，要注意的是他们对格式的要求极其严格，如果你的数据格式不对，就会报错。相对来说我个人比较保险的做法是：先JSON.parse(JSON.stringify())然后再JSON.parse()。
ps:JSON.stringify()序列化为JSON字符串;
JSON.parse()j解析为javascript对象
补充：设置编辑器的样式使其风格适用于项目
5.修改编辑的样式，使其符合项目需求
第一步，在组件加一个属性
theme="my-awesome-json-theme"
<json-viewer
v-for="(ite, idx) in finallyJsonList"
:key="idx"
style="width: 100%; min-width: 3.125rem"
:value="ite"
:expand-depth="5"
copyable
boxed
theme="my-awesome-json-theme"
sort
></json-viewer>第二步，在这个类名里面写样式了
需要注意的是，这个编辑器完全可以使用浏览器F12查看元素的类名去改，和我们平时开发没啥区别，还是挺方便的。
.my-awesome-json-theme {
overflow-x: hidden;
background: #0c2b52;
white-space: nowrap;
color: #01fef4;
font-size: 14px;
font-family: Consolas, Menlo, Courier, monospace;
.jv-ellipsis {
color: rgb(237, 13, 13);
background-color: rgb(241, 11, 11);
display: inline-block;
line-height: 0.9;
font-size: 0.9em;
padding: 0px 4px 2px 4px;
border-radius: 3px;
vertical-align: 2px;
cursor: pointer;
user-select: none;
}
.jv-button {
color: #49b3ff;
}
::v-deep .jv-key {
color: #01fef4 !important;
}
::v-deep .jv-push {
color: #fff;
}
.jv-item {
&.jv-array {
color: #111111;
}
&.jv-boolean {
color: #fc1e70;
}
&.jv-function {
color: #067bca;
}
&.jv-number {
color: #fc1e70;
}
&.jv-number-float {
color: #fc1e70;
}
&.jv-number-integer {
color: #fc1e70;
}
&.jv-object {
color: #111111;
}
&.jv-undefined {
color: #e08331;
}
&.jv-string {
color: #42b983;
word-break: break-word;
white-space: normal;
}
}
.jv-code {
::v-deep .jv-toggle {
color: #067bca !important;
&:before {
padding: 0px 2px;
border-radius: 2px;
}
&:hover {
&:before {
background: rgb(242, 5, 5);
}
}
}
}
}总结
到此这篇关于vue使用vue-json-viewer展示JSON数据的文章就介绍到这了,更多相关vue-json-viewer展示JSON数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue路由划分模块并自动引入方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试,下面这篇文章主要给大家介绍了关于vue2中@hook的解析与妙用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
Vue3 Composition API优雅封装第三方组件实例
这篇文章主要为大家介绍了Vue3 Composition API优雅封装第三方组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
在 Vue.js 中,组件通信是开发过程中非常重要的一部分,它涉及到不同组件之间的数据传递和交互,本文将介绍如何实现父子组件之间的有效通信,并盘点了常见的5种Vue组件通信方式总结,需要的朋友可以参考下2024-03-03
本文主要介绍了vue-class迁移vite的一次踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目，通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值，需要的朋友可以参考下2019-01-01
这篇文章主要介绍了解决vue addRoutes不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家介绍了Electron-store本地存储功能的用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了vue中getters的使用与四个map方法的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
今天小编就为大家分享一篇vue 返回上一页,页面样式错乱的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论