Vue-json-viewer组件非常易用,只需要在Vue项目中安装该组件并在需要的地方引用即可。下面是一个简单的例子: <template><vue-json-viewer:data="jsonData":theme="theme"/></template>importVueJsonViewerfrom'vue-json-viewer'exportdefault{components: {VueJsonViewer}, data () {return{jsonData: {'name':'...
当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。 ## 1. 安装 ```bash $ npm install vue-json-viewer@2 --save // Vue2 $
// 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(...
如果在单页面中只需要引入 import JsonViewer from 'vue-json-viewer' ,然后在components中注入JsonViewer 组件,即可正常使用,代码如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 // vue单页面文件中引入// 引入组件importJsonViewerfrom'vue-json-viewer'exportdefault{// 注册组件components:{JsonViewer}...
在上述代码中,expand-depth属性设置了JSON对象的最大展开深度,copyable属性允许用户复制JSON内容,boxed属性为JSON内容添加了一个边框,sort属性对JSON对象的键进行排序。 通过以上步骤,你就可以在Vue项目中使用vue-json-viewer对JSON数据进行格式化展示了。
A JSON tree view component that is easy to use and also supports data selection.. Latest version: 2.4.0, last published: a year ago. Start using vue-json-pretty in your project by running `npm i vue-json-pretty`. There are 160 other projects in the npm r
Vue.use(JsonViewer) 1. 2. 3.使用 <json-viewer:value="jsonData":expand-depth="5"copyableboxedsort></json-viewer> 1. jsonData是需要格式化渲染的数据,如果后台返回的格式为字符串,需要先通过JSON.parse将字符串转化为对象 属性说明: 效果展示: ...
背景在使用vue-json-pretty展示json数据时,有时候我们需要给特定的 key 加一些标注,对其进行一些扩展。如下面的需求:查询出来的json数据,对部分的key标注...
vuejs展示json的组件. Latest version: 2.2.22, last published: 3 years ago. Start using vue-json-viewer in your project by running `npm i vue-json-viewer`. There are 220 other projects in the npm registry using vue-json-viewer.
用Vue.js 实现一个 JSON Viewer 演示地址:http://json.imlht.com/vue-json-viewer-demo.html 常用的 JSON 格式化工具 JSON是一种轻量级的数据交换格式, 相信大家用得比较多, 平时也用了很多格式化工具, 例如我最常用的Json.cn, 还有这个BeJson, 前者清爽无广告, 后者性能给力(有广告), 可以复制下面的JSON...