当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。1. 安装$ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 2. 配置在mai
Vue-json-viewer组件非常易用,只需要在Vue项目中安装该组件并在需要的地方引用即可。下面是一个简单的例子: <template><vue-json-viewer:data="jsonData":theme="theme"/></template>importVueJsonViewerfrom'vue-json-viewer'exportdefault{components: {VueJsonViewer}, data () {return{jsonData: {'name':'...
通过这些步骤,你就可以在你的 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...
<json-viewer :value="jsonData" copyable></json-viewer> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 其中,value 代表显示的JSON数据,copyable 表示可以复制。效果如下图所示: 对于动态数据更新,确保你的数据对象是响应式的(在 Vue 实例的 data 函数返回的对象里)。
// 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> 假数据...
app.use(JsonViewer) app.mount('#app') 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...
演示地址:http://json.imlht.com/vue-json-viewer-demo.html 常用的 JSON 格式化工具 JSON是一种轻量级的数据交换格式, 相信大家用得比较多, 平时也用了很多格式化工具, 例如我最常用的Json.cn, 还有这个BeJson, 前者清爽无广告, 后者性能给力(有广告), 可以复制下面的JSON体验一下: ...
1. 安装vue-json-viewer插件 代码语言:javascript 代码运行次数:0 运行 AI代码解释 npm install vue-json-viewer--save 如果npm安装报错,可换成cnpm安装。 2. 引入插件 引入插件有两种方式,可以全局引入,也可以在单个页面文件中引入该插件。 如果在全局main.js中引入,那么全局可用,无需在单独页面的 components 中...