vue配合element-ui设置查看表单的JSON数据

由于是演示，所以全局引用了element-ui。核心是格式化JSON的函数getJsonData。配合一些样式设置，标记出对应的数据类型。

// 处理json数据，采用正则过滤出不同类型参数
getJsonData (json) {if (typeof json !== 'string') {json = JSON.stringify(json, undefined, 2)}json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\\-]?\d+)?)/g,function (match) {var cls = 'number'if (/^"/.test(match)) {if (/:$/.test(match)) {cls = 'key'} else {cls = 'string'}} else if (/true|false/.test(match)) {cls = 'boolean'} else if (/null/.test(match)) {cls = 'null'}return '<span class="' + cls + '">' + match + '</span>'})
}

下面是全部代码，为了不让样式出现污染问题，设置了scoped。但是element-ui的样式貌似和scoped的有些冲突。dialog的自定义样式属性没有生效，只能使用深度选择器来解决了。或者去掉scoped，就怕出现样式污染。

<template><div><div><el-row><el-col :span="12"><!-- 表单 --><div><el-form label-width="80px"><el-form-item label="JSON数据"><el-inputv-model="input"placeholder="请输入内容"size="small"></el-input></el-form-item></el-form></div></el-col><!-- 查看JSON格式按钮 --><el-col :span="4"><el-button type="primary" @click="getJson">查看JSON</el-button></el-col></el-row></div><!-- dialog --><el-dialogtitle="JSON信息":visible.sync="dialogVisible"width="50%":before-close="handleClose"centerclass="json-dialog"><pre v-html="showJson" class="json-box"></pre><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data () {return {dialogVisible: false,input: `{  "resultcode":"200",  "reason":"成功的返回",  "result":{  "company":"顺丰",  "com":"sf",  "no":"575677355677",  "list":[  {  "datetime":"2020-06-25 10:44:05",  "remark":"已收件",  "zone":"台州市"  },  {  "datetime":"2020-06-25 11:05:21",  "remark":"快件在 台州 ,准备送往下一站 台州集散中心",  "zone":"台州市"  }  ],  "status":1  },  "error_code":0  }`,showJson: null}},methods: {handleClose (done) {this.$confirm('确认关闭？').then(_ => {done()}).catch(_ => {})},getJson () {this.dialogVisible = trueconst json = JSON.parse(this.input)this.showJson = this.getJsonData(json)},// 处理json数据，采用正则过滤出不同类型参数getJsonData (json) {if (typeof json !== 'string') {json = JSON.stringify(json, undefined, 2)}json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\\-]?\d+)?)/g,function (match) {var cls = 'number'if (/^"/.test(match)) {if (/:$/.test(match)) {cls = 'key'} else {cls = 'string'}} else if (/true|false/.test(match)) {cls = 'boolean'} else if (/null/.test(match)) {cls = 'null'}return '<span class="' + cls + '">' + match + '</span>'})}}
}
</script><style lang="less" scoped>
.json-dialog {/deep/ .json-box {.string {color: green;}.number {color: darkorange;}.boolean {color: blue;}.null {color: magenta;}.key {color: red;}}
}
</style>

HTML显示JSON数据格式相关推荐

android 将数据转换成JSON数据格式并使用JSONObject解析JSON格式的数据
比起XML文件解析,JSON数据解析的有点在于他的体积小,在网络上传输的时候可以更省流量.同时它也有缺点,Json数据的语义性较差,看起来没有XML直观.现在JSON已经被大多数开发人员所接受,在网络 ...
将html代码确析成json数据格式,JSON字符串解析成JSON数据格式
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
JSON数据格式解析库(cJSON、Jansson)的使用在STM32上移植和使用
json | json-c使用入门这篇讲的也不错,抽空看下(网络传输json数据) https://www.bilibili.com/video/av669454528?p=3&spm_id ...
MySql 5.7 json数据格式增删改查操作（不定时更新）
2019独角兽企业重金招聘Python工程师标准>>> 测试的表的结构如下: CREATE TABLE `userinfo` (`id` int(11) NOT NULL,`user ...
百度搜索排名API接口PC返回JSON数据格式
百度搜索排名API接口返回JSON数据格式写个笔记, 记录一下 https://www.baidu.com/s?wd=新信息&pn=50&rn=50&tn=json 参数说明 ...
详解JSON数据格式
JSON数据格式 JSON 的由来 JSON 的基本语法解析与序列化 JSON 的由来在目前的开发中,JSON是一种非常重要的数据格式,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据 ...
XML和JSON数据格式对比
概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...
Ajax---使用json数据格式输出数据
将Ajax得到的数据使用json数据格式输出 1.项目清单 2.代码 2.1.Procince类代码 2.2.ProvinceDao类代码 2.3.QueryJsonServlet类代码 2.4.Te ...
JSON 数据格式解析（转）
JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互.本文将快速讲解 JSON 格式,并通过代码示例演示如 ...

HTML显示JSON数据格式

vue配合element-ui设置查看表单的JSON数据

HTML显示JSON数据格式相关推荐

最新文章

热门文章