当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。1. 安装$ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 2. 配置在mai
官网地址:https://www.npmjs.com/package/vue-json-viewer 2.1 全局注册组件 在全局 main.js 中引入,在 main.js 文件中添加: importJsonViewerfrom'vue-json-viewer'Vue.use(JsonViewer) 2.2 单个页面局部引入 importJsonViewerfrom'vue-json-viewer'exportdefault{components:{JsonViewer} } Vue-json-viewer的使...
通过这些步骤,你就可以在你的 Vue.js 应用中使用 vue-json-viewer 来优雅地展示 JSON 数据了。如果你需要更多关于 vue-json-viewer 的配置选项和用法,可以参考它的官方文档1。 Footnotes 官方文档链接仅为示例,实际链接可能根据 vue-json-viewer 的版本和发布位置有所不同。 ↩ ...
{JsonViewer}from"vue3-json-viewer"// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"import"vue3-json-viewer/dist/vue3-json-viewer.css";import{reactive,ref}from"vue";letobj={name:"qiu",//stringage:18,//ArrayisMan:false,//booleandate:new...
App.vue <template><json-viewer:value="jsonData"copyableboxedsort/></template>import{ reactive, ref }from"vue";letobj = {name:"qiu",//字符串age:18,//数组isMan:false,//布尔值date:newDate(),fn:()=>{},arr:[1,2,5] };constjsonData...
vue-json-viewer 简单易用的json内容展示组件,支持vue@2.0+,支持SSR,组件支持增量渲染即使大文件json也可以快速渲染。 安装 示例 选项 主题 安装 使用npm: $ npm install vue-json-viewer --save 使用yarn: $ yarn add vue-json-viewer 示例 <json-viewer:value="jsonData"></json-viewer><json-viewer:value...
简介:JSON 是一种轻量级的数据交换格式, 相信大家用得比较多, 平时也用了很多格式化工具, 例如我最常用的 Json.cn, 还有这个 BeJson, 前者清爽无广告, 后者性能给力(有广告). 本文讲详细讲解如何使用 Vue.js 实现一个 JSON Viewer! 演示地址:http://json.imlht.com/vue-json-viewer-demo.html ...
// Vue2 yarn add vue-json-viewer@2 // Vue3 yarn add vue-json-viewer@3 2.引入并全局注册 在main.js(入口文件里面) 1. import JsonViewer from 'vue-json-viewer' 2. Vue.use(JsonViewer) 3.组件内使用 jsonData就是你想要渲染的数据 <json-viewer :value="jsonData"></json-viewer> 假数据...
Vue-json-viewer 展示JSON格式数据 最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,于是用到了vue-json-viewer这个插件。 以下是实现的效果: 插件的使用步骤: 1. 安装vue-json-viewer插件...
例子 <json-viewer :value="jsonData"></json-viewer><json-viewer:value="jsonData":expand-depth=5copyableboxedsort></json-viewer>importJsonViewerfrom'vue-json-viewer'// Import JsonViewer as a Vue.js pluginVue.use(JsonViewer)// or// components: {JsonViewer} ...