vue-json-viewer插件实现JSON数据在页面的展示【高亮、可折叠、可复制】

效果看完，那么我们来上干货了！

安装vue-json-viewer插件

基于npm的安装：

$ npm install vue-json-viewer --save

基于yarn的安装：

$ yarn add vue-json-viewer

代码实现

在script 里面导入包

import Vue from ‘vue’;

import JsonViewer from ‘vue-json-viewer’;

// Import JsonViewer as a Vue.js plugin

Vue.use(JsonViewer);

在vue项目中引入里面加入如下一种： 其中jsonData必须是json类型的数据。

{ { $t(‘parameters’) }}

<json-viewer

:value=“jsonViewer”

:expand-depth=“5”

:copyable=“copyable”

boxed

sort