当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。 ## 1. 安装 ```bash $ npm install vue-json-viewer@2 --save // Vue2 $
Theming Installing Using npm: $ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 Using yarn: $ yarn add vue-json-viewer@2 // Vue2 $ yarn add vue-json-viewer@3 // Vue3 Example ...
在Vue项目中使用vue-json-viewer进行JSON格式化,可以按照以下步骤进行: 安装vue-json-viewer 使用npm或yarn来安装vue-json-viewer。根据你的Vue版本(Vue 2或Vue 3),选择合适的版本进行安装。 bash # 对于Vue 3 npm install vue-json-viewer@3 --save # 或者 yarn add vue-json-viewer@3 # 对于Vue 2 npm...
$ npm install vue-json-viewer@2--save// Vue2$ npm install vue-json-viewer@3--save// Vue3 例子 <json-viewer :value="jsonData"></json-viewer><json-viewer:value="jsonData":expand-depth=5copyableboxedsort></json-viewer>importJsonViewerfrom'vue-json-viewer'// Import JsonViewer as a Vue...
// 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> 假数据...
Simple JSON viewer component, for Vue.js 2. Support for incremental update components Installing Example Options Theming Installing Using npm: $ npm install vue-json-viewer --save Using yarn: $ yarn add vue-json-viewer Example <json-viewer:value="jsonData"></json-viewer><json-viewer:value="...
npm install vue-json-viewer@2 --save // 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-vi...
$ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 Using yarn:$ yarn add vue-json-viewer@2 // Vue2 $ yarn add vue-json-viewer@3 // Vue3 Example<json-viewer :value="jsonData"></json-viewer> <json-viewer :value="jsonData" :...
2. 引入插件 引入插件有两种方式,可以全局引入,也可以在单个页面文件中引入该插件。 如果在全局main.js中引入,那么全局可用,无需在单独页面的 components 中注入JsonViewer,可直接调用组件,代码如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释
在前端开发中,我们经常需要处理JSON数据。然而,JSON数据一般是以字符串的形式来传递,难以直观地查看、理解和调试,这阻碍了我们开发工作的进程。Vue-json-viewer组件正是为了解决这个问题而生。 安装vue-json-viewer插件 npminstallvue-json-viewer--save 引入插件并注册 ...