1. 安装 $ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 2. 配置 在main.js中添加以下内容,或者在单独的插件文件中添加。 importVuefrom'vue'importJsonViewerfrom'vue-json-viewer'// Import JsonViewer as a Vue.js pluginVue.use(JsonViewer) ...
npminstallvue-json-viewer--save 引入插件并注册 官网地址: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...
// main.js全局引入importVuefrom'vue'importJsonViewerfrom'vue-json-viewer'Vue.use(JsonViewer) 如果在单页面中只需要引入 import JsonViewer from 'vue-json-viewer' ,然后在components中注入JsonViewer 组件,即可正常使用,代码如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 // vue单页面文件中引入...
vue-json-viewer: 简介:vue-json-viewer是一个用于在Vue.js应用中展示JSON数据的插件,提供了直观和美观的方式来可视化JSON数据。 特点:易于使用、美观的展示、支持复制功能、主题支持、预览模式等。 安装:通过npm或yarn安装,例如npm install vue-json-viewer --save。 使用:在Vue组件中引入并注册,然后在模板中使用...
import JsonViewer from 'vue-json-viewer'; // 非全局的不用写这个,直接在组件中使用标签引入 Vue.use(JsonViewer) 1. 2. 3. 4. 5. 使用插件 初次使用者可能不知道如何正确地将数据传递给 Vue-JSON-Viewer 组件,或者遇到数据更新组件未响应的情况。我们可以使用:value属性来绑定 JSON 数据,如下所...
演示地址: http://json.imlht.com/vue-json-viewer-demo.html json-viewer 常用的 JSON 格式化工具 JSON 是一种轻量级的数据交换格式, 相信大家用得比较多, 平时也用了很多格式化工具, 例如我最常用的 Json.cn, 还有这个 BeJson, 前者清爽无广告, 后者性能给力(有广告), 可以复制下面的 JSON 体验一下: JSO...
演示地址:http://json.imlht.com/vue-json-viewer-demo.html 常用的 JSON 格式化工具 JSON是一种轻量级的数据交换格式, 相信大家用得比较多, 平时也用了很多格式化工具, 例如我最常用的Json.cn, 还有这个BeJson, 前者清爽无广告, 后者性能给力(有广告), 可以复制下面的JSON体验一下: ...
// Vue2 npm install vue-json-viewer@2 --save // Vue3 npm install vue-json-viewer@3 --save yarn下载: // 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(...
简单易用的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="jsonData":exp...
npm install vue-json-viewer --save 结果展示: <json-viewer :value="jsonData"copyable boxed sort style="line-height: 1.2em; font-size: 14px;"></json-viewer> 其中: copyable 标识可以粘贴 sort 属性为排序 boxed 数据在边框内 __EOF__