您现在的位置是：网站首页> 编程资料编程资料

vue使用vue-json-viewer展示JSON数据的详细步骤_vue.js_

2023-05-24 465人已围观

简介 vue使用vue-json-viewer展示JSON数据的详细步骤_vue.js_

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就是你想要渲染的数据

假数据供测试效果：

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"

第二步，在这个类名里面写样式了

需要注意的是，这个编辑器完全可以使用浏览器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); } } } } }