使用 vue-json-viewer 工具在界面显示json格式数据

最新推荐文章于 2024-07-31 09:50:09 发布

meetAlice

最新推荐文章于 2024-07-31 09:50:09 发布

阅读量1.2k

点赞数 10

分类专栏： javascript 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_42129143/article/details/135463374

版权

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

安装vue-json-viewer

npm install vue-json-viewer --save

引入：

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

使用：

<json-viewer 
    :value="jsonData" 
    show-double-quotes 
    :preview-mode="true" 
    :show-array-index="false">
</json-viewer>

重置样式：

.jv-container.jv-light{
  background: transparent!important;
}
.jv-container.jv-light .jv-item.jv-object{
  color: #cdf8ff!important;
}
.jv-container.jv-light .jv-key{
  color: #cdf8ff!important;
}
.jv-container.jv-light{
  color: #cdf8ff!important;
}
.jv-container.jv-light .jv-item.jv-array{
  color: #cdf8ff!important;
}

效果：