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数据格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。