vue展示json格式数据【vue-json-viewer】

文章目录

• JSON的定义和特点
• 一、安装组件vue-json-viewer
• 二、在main.js中引入并使用vue-json-viewer
• 三、在vue文件中使用vue-json-viewer

JSON的定义和特点

JSON的定义：

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript对象表示法（JavaScript Object Notation），常用于Web开发中。

JSON的特点：
·轻量级：JSON格式简单，易于阅读和编写，并且占用的存储空间较小。
·跨平台：JSON是一种跨平台的数据格式，可以在不同的编程语言和系统之间进行数据交换。
·易于解析：JSON格式易于解析，可以使用各种编程语言中的标准库或第三方库来解析JSON数据。
·支持嵌套：JSON支持嵌套结构，可以表示复杂的数据结构，如数组、对象等。
·可扩展性：JSON可以根据需要进行扩展，添加自定义的属性或方法。

一、安装组件vue-json-viewer

npm install vue-viewer --save

二、在main.js中引入并使用vue-json-viewer

import JsonViewer from 'vue-json-viewer';
Vue.use(JsonViewer)

三、在vue文件中使用vue-json-viewer

<json-viewer :value="obj"></json-viewer>

其中obj数据如果是JSON格式字符串，要先用JSON.parse()转为对象

<json-viewer
  :value="JSON.parse(alarmInfo.additionalInfo)"
  :expand-depth="5"
  boxed
  sort
></json-viewer>

未格式化效果：

JSON格式化后：