Vue-json-viewer 展示JSON格式数据

最近在开发一个公司的投放管理系统的操作日志模块，要查看某条操作日志的请求参数，要将请求的参数以JSON格式的形式展示出来，于是用到了vue-json-viewer这个插件。

以下是实现的效果：

插件的使用步骤：

1. 安装vue-json-viewer插件

npm install vue-json-viewer --save

如果npm安装报错，可换成cnpm安装。

2. 引入插件

引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。

如果在全局main.js中引入，那么全局可用，无需在单独页面的 components 中注入JsonViewer，可直接调用组件，代码如下：

// main.js全局引入
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

如果在单页面中只需要引入 import JsonViewer from 'vue-json-viewer' ，然后在components中注入JsonViewer 组件，即可正常使用，代码如下：

// vue单页面文件中引入
<script>// 引入组件import JsonViewer from 'vue-json-viewer'export default {// 注册组件components:{JsonViewer}}
</script>

3. 使用插件

<json-viewer :value="content" copyable theme="my-awesome-json-theme"></json-viewer>

value 代表显示的JSON数据；

copyable 表示可以复制；

theme 表示要引入的样式，引入的样式会覆盖默认的样式，如果对默认的样式不满意的话可以用这种方式进行重写，一般情况下用默认的就好，可以不用指定这个参数。

// vue单页面文件中引入
<script>import '@/styles/my-awesome-json-theme.scss';</script>

其他参数：

Vue-json-viewer 展示JSON格式数据相关推荐

Dadroit JSON Viewer 查看json文件的利器
深度学习中,往往有很多json文件需要查看,比如说数据集和处理结果.然而系统自带的工具都很慢,而且没法格式化.为此,这个工具很好的解决这个问题,瞬间开很大的文件,还可以非常好的展示层级结构,比vsco ...
Vue2.x-01点击按钮弹出子Vue组件，遍历JSON展示数据
文章目录概述实现过程 Step1: 父组件设置Button按钮 Step2: 这里使用了showHandlerFlag来控制子组件是否显示,所里需要在data中定义下这个变量 Step3: 引用声 ...
html中如何美化展示json格式数据
本篇文章给大家介绍 html中美化展示json格式数据的方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 直接上代码: html中主要加一个pre 的标签 <h2>G ...
vue表单校验json数组格式和普通数组格式数据
1.效果图说明:3种动作,对应3种验证规则,动作1:数字对象或数组均可(空也可):动作2:只有数组对象可通过验证:动作3:数字类型可通过验证 2.代码实现 (1)template(注意这里的循环数据 ...
Python数据处理(一)：处理 JSON、XML、CSV 三种格式数据
Python 数据处理系列博客来啦! 本系列将以<Python数据处理>这本书为基础,以书中每章一篇博客的形式带大家一起学习 Python 数据处理.书中有些地方讲的不太详细,我会查阅其他 ...
ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...
【javascript】中国省市区号JSON格式数据--2017年为准，含省市名称和电话区号
在WEB开发过程中,往往需要用到城市列表.鉴于网上都是通过访问某个数据库得到,在实际应用中往往大材小用,耗费宽带资源,增加等待时间. 最终实现如下图所示:因为数据比较大,页面展示效果不佳, 这里只放了 ...
JavaScript数组格式的数据转换为json格式数据
vue + JavaScript 把数组格式的数据转换为json格式数据 <!DOCTYPE html> <html lang="en"><head& ...
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
java json数据输出,java服务器端输出JSON格式数据
java服务器端输出JSON格式数据本文我们讨论如何在服务器端输出 JSON 格式的数据.以 Java 为例,我们将演示将一个 Java 对象编码为 JSON 格式的文本. 将 String 对象编 ...

Vue-json-viewer 展示JSON格式数据

1. 安装vue-json-viewer插件

2. 引入插件

3. 使用插件

Vue-json-viewer 展示JSON格式数据相关推荐

最新文章

热门文章