vue中json数据格式化

项目开发过程遇到这样的需求，就是在页面上需要对后端返回的json数据进行格式化显示，用到了一个插件：vue-json-viewer，这是官方文档https://www.npmjs.com/package/vue-json-viewer。
（1）安装

npm install vue-json-viewer --save

（2）组件中引入

import JsonViewer from 'vue-json-viewer'

注册组件

components:{JsonViewer},

（3）具体用法：

<json-viewer :value="result" closed="true"theme="my-awesome-json-theme" :expand-depth="1" icon-style copyable boxed sort="true":preview-mode="false"></json-viewer>

这里你想要展示什么数据，和value进行一个双向绑定，就可以和后端进行交互了，其他的参数官方文档有详细的说明，在这里我就说说我遇到的问题：

真正的效果图如上图所示，我第一次使用的时候，红色标记的箭头显示不出来，因为后端的json数据有些长，我找了半天也没找到问题找到什么原因，网上的文档也是一笔带过，原因就是
这个参数:preview-mode="false"应该是false，和黑色三角箭头有关的是preview-mode。其他参数具体信息大家可以看看官方文档，很详细。

vue中json数据格式化相关推荐

# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
php JSON数据格式化输出方法
php 的json_encode能把数组转换为json格式的字符串.字符串没有缩进,中文会转为unicode编码,例如\u975a\u4ed4.人阅读比较困难.现在这个方法在json_encode的基 ...
php json 美化,php JSON数据格式化（美化）的方法
一.使用 json_encode 输出<?php header('content-type:application/json;charset=utf8'); $arr = array( 'sta ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
ajax写入json数据格式化,java ajax解析json数据格式化
java ajax解析json数据格式化 [2021-02-01 23:35:58] 简介: 服务器 hadoop格式化HDFS出现错误解决办法报错信息: host:java.net.Unknow ...
前端实现json数据格式化展示
1. 故事前景: 后端返回给前端一串json字符串,前端需要做格式化处理并将其美观地展示给用户. 2. 效果演示: 3. 实现代码: <!DOCTYPE html> <html la ...
推荐一个在线json数据格式化网站
json数据非常友好方便的处理: 推荐一个在线json数据格式化网站 http://json.parser.online.fr/ 转载于:https://www.cnblogs.com/cocoaji ...
android libbfaac.so,Android中Json数据读取与创建
一: Json的特性和在数据交互中的地位就不用说了,直接看案例. 首先在android studio中创建assets文件目录,用于存放Json数据文件,android studio 1.3 默认项 ...
js html 处理json数据,JS中Json数据的处理和解析JSON数据的方法详解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
IOS中JSON数据的解析
IOS中JSON数据解析官方为我们提供的解析JSON数据的类是NSJSONSerialization,首先我们先来看下这个类的几个方法: + (BOOL)isValidJSONObject:(id) ...

vue中json数据格式化

vue中json数据格式化相关推荐

最新文章

热门文章