import jsonView from 'vue-json-views' export default { components: { jsonView, }, data() { return { // 可使用 JSON.parse() 对json数据转化 jsonData: { name:'dog', age:2, hobby:{ eat:{ food:'狗粮', water:'冰可乐' }, sleep:{ time:'白日梦' } } }, }; }, }; 复制代码 ...
gitclonehttps://github.com/zhaoxuhui1122/vue-json-view.gitnpm i npm run dev 或 直接双击index.html 2.在项目中使用 npm i-Svue-json-views// 注意是 viewsimportjsonViewfrom'vue-json-views'或 直接将未编译的组件复制到项目内(推荐该方式,便于自定义修改) <template><json-view:data="json"/></t...
1.首先先下载好JsonView的组件:JsonView.vue,组件代码如下: 1<template>2345678"{{jsonKey}}": 910{{prefix}}11{{innerclosed ? ('...' + subfix) : ''}}1213
4.1 在 vue 中使用 <template><json-view :data="jsonData"/></template>import jsonView from 'vue-json-views'export default {components: {jsonView,},data() {return {// 可使用 JSON.parse() 对json数据转化jsonData: {name:'dog',age:2,hobby:{eat:{food:'狗粮',water:'冰可乐'},sleep:{ti...
] } } }, components: { JsonView } } 可传参数: json: [Object, Array],//必传 显示的数据closed: {//是否默认展开type: Boolean,default:false}, fontSize: {//文字大小type: Number,default: 18}
Star Here is 1 public repository matching this topic... Vue and Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator. jsonformatterschemavalidationvueviewssrformatvalidatornuxtvalidateeditbigintnuxtjsjsoneditorajvvue-demisvelte-jsoneditorvue-json-viewervue-json-pretty ...
git clone https://github.com/zhaoxuhui1122/vue-json-view.git npm i npm run dev 或 直接双击index.html 2.在项目中使用 npm i -S vue-json-views // 注意是 views import jsonView from 'vue-json-views' 或 直接将未编译的组件复制到项目内(推荐该方式,便于自定义修改) <template> <json-view...
1.⾸先先下载好JsonView的组件：JsonView.vue，组件代码如下：<template> "{{jsonKey}}": {{prefix}} {{innerclosed ? ('...' + subfix) : ''}} {{
vue-json-views实现json格式化展示 文档地址:https://github.com/zhaoxuhui1122/vue-json-view 实例: <JsonView:data="jsonData":deep="1"icon-style="triangle"theme="vs-code"></JsonView> importJsonViewfrom'vue-json-views'jsonData:{}
importVuefrom'vue'importJsonViewerfrom'vue-json-viewer'// Import JsonViewer as a Vue.js pluginVue.use(JsonViewer)// or// components: {JsonViewer}newVue({el:'#app',data(){return{jsonData:{total:25,limit:10,skip:0,links:{previous:undefined,next:function(){},},data:[{id:'5968fcad629...