npm install vue-json-viewer --save # 或者 yarn add vue-json-viewer 2. 在 Vue 项目中引入 vue-json-viewer 组件 在你的 Vue 项目中,你需要引入 vue-json-viewer 组件并在你的 Vue 实例或组件中注册它。你可以在全局范围内引入,也可以在需要使用的组件中局部引入。
当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。1. 安装$ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 ...
官网地址: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-json-viewer npm install vue-json-viewer --save 二、在main.js中引入并使用vue-json-viewer importJsonViewerfrom'vue-json-viewer';Vue.use(JsonViewer); 三、在.vue文件中使用vue-json-viewer <json-viewer:value="obj"></json-viewer> 其中obj数据如果是JSON格式字符串,要先用JSON.parse...
第一步:导入Vue JSONViewer 要使用Vue JSONViewer,首先需要在Vue项目中导入它。可以通过npm安装Vue JSONViewer,并在需要的组件中引入它。 可以使用以下命令来安装Vue JSONViewer: shell npm install vue-json-viewer 然后在组件中引入Vue JSONViewer: javascript import VueJsonViewer from 'vue-json-viewer' Vue.use...
最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,于是用到了vue-json-viewer这个插件。 以下是实现的效果: 插件的使用步骤: 1. 安装vue-json-viewer插件 代码语言:javascript 复制
1、安装 npm install vue-json-viewer --save; 2、引入插件: 引入插件有两种方式,可以全局引入,也可以在单个页面文件中引入该插件。 如果在全局main.js中引入,那么全局可用,无需在单独页面的 components 中注入JsonViewer,可直接调用组件,代码如下: // main.js全局引入importVuefrom'vue'importJsonViewerfrom'vue...
1. **安装`vue-json-viewer`**: 使用npm或yarn安装`vue-json-viewer`: ```bash npm install vue-json-viewer #或 yarn add vue-json-viewer ``` 2. **在组件中引入并使用`vue-json-viewer`**: ```html <!-- YourComponent.vue --> <template> <json-viewer :data="jsonData" :options=...
// Vue3 npm install vue-json-viewer@3 --save 1. 2. 3. 4. 2.引入并全局注册 main.js文件中 import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer) 1. 2. 3.使用 <json-viewer:value="jsonData":expand-depth="5"copyableboxedsort></json-viewer> ...
vue-json-viewer 展示json数据 main.js import JsonViewer from 'vue-json-viewer'Vue.use(JsonViewer); vue <el-dialogtitle="退款数据详情":visible.sync="dialogvisible2"v-if="dialogvisible2"><json-viewer:value="jsondata"sort :expand-depth="5"></json-viewer></el-dialog>...