目录1.下载2.引入并全局注册3.组件内使用4.一点使用技巧、心得5.修改编辑的样式,使其符合项目需求总结1.下载 npm下载: // Vue2 npm install vue-JS
npm下载:
yarn下载:
// Vue2
yarn add vue-json-viewer@2
// Vue3
yarn add vue-json-viewer@3
在main.js(入口文件里面)
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)
jsonData就是你想要渲染的数据
<json-viewer :value="jsonData"></json-viewer>
假数据供测试效果:
data(){
return {
jsonData:{
name:"小明",
age:18,
items:{
like:"pingpang",
skip:0
}
}
}
}
效果图:
在使用类似插件的时候,先写假数据,如果能正常渲染,那就将后端的数据处理成假数据一样的格式。
另外,前端处理JSON数据一般使用JSON.parse()、eval()或者JSON.stringify()方法,要注意的是他们对格式的要求极其严格,如果你的数据格式不对,就会报错。相对来说我个人比较保险的做法是:先JSON.parse(JSON.stringify())然后再JSON.parse()。
ps:JSON.stringify()序列化为JSON字符串;
JSON.parse()j解析为javascript对象
补充:设置编辑器的样式使其风格适用于项目
第一步,在组件加一个属性
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数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue使用vue-json-viewer展示JSON数据的详细步骤
本文链接: https://www.lsjlt.com/news/166574.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0