JSON 是前端常用的数据格式，有时候我们需要在页面上展示 JSON 数据，但是直接展示 JSON 的字符串形式是不够友好的。此时， jsonview-vue 就派上了用场。jsonview-vue是一个可以将 JSON 对象以可视化展示的方式呈现在页面上的 Vue.js 组件。
安装
你可以通过 npm 来安装 jsonview-vue。首先，你需要保证你已经安装了 Vue.js，命令如下：
npm install vue
然后，安装 jsonview-vue：
npm install jsonview-vue
使用方法
安装完成后，在需要使用的组件中先引入：
import JsonViewer from 'jsonview-vue'
然后在 template 中使用：
<template>
<div>
<JsonViewer :data="jsonData" />
</div>
</template>其中，data 属性是传入组件的 JSON 数据。
配置项
jsonview-vue 的默认配置项已经非常不错，但是如果你希望对其进行个性化配置，可以在引入组件时传入配置项：
-- -------------------- ---- -------
------ ---------- ---- --------------
------ ------- -
----------- -
----------
--
------ -
------ -
--------- -
----- -------
---- ---
-------- ------------ ----------
--
-------- -
---------- -----
----------- ----
-
-
-
-其中 options 是配置选项，包含如下属性：
- collapsed: 默认为 false，表示展开所有 JSON 对象和数组。设置为 true 后，只展开第一层。
- withQuotes: 默认为 false，表示 JSON 对象属性不带双引号。设置为 true 后，属性名会带双引号。
在模板中使用时，需要引入 options，如下：
<template>
<div>
<JsonViewer :data="jsonData" :options="options" />
</div>
</template>基本示例
下面是一个基本的示例，展示数据为一个 JSON 对象：
-- -------------------- ---- -------
----------
-----
----------- ---------------- --
------
-----------
--------
------ ---------- ---- --------------
------ ------- -
----------- -
----------
--
------ -
------ -
--------- -
----- -------
---- ---
-------- ------------ ----------
-
-
-
-
---------
------ -------
-- --------------- --
-------------------- -
---------- -----
------------ ----
------ --------
-
-------------- -
------------ -----
------ --------
-
----------------- -
------ --------
-
----------------- -
------ --------
-
--------总结
jsonview-vue 是一个非常实用的 Vue.js 组件。通过本文的介绍，你可以快速上手使用 jsonview-vue，也可以进行个性化配置以满足业务需求。希望这篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66ce8