由於是演示，所以全域性引用了element-ui。核心是格式化json的函式getjsondata。配合一些樣式設定，標記出對應的資料型別。
// 處理json資料，採用正則過濾出不同型別引數
getjsondata
(json)
json = json
.replace
(/&/g
,'&').
replace(/
,'<').
replace
(/>/g
,'>'
)return json.
replace
(/("(\\u[a-za-z0-9]|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[ee][+\\-]?\d+)?)/g
,function
(match)
else
}elseif(
/true|false/
.test
(match)
)elseif(
/null/
.test
(match)
)return
'+ cls +
'">'
+ match +''}
)}
下面是全部**，為了不讓樣式出現汙染問題，設定了scoped。但是element-ui的樣式貌似和scoped的有些衝突。dialog的自定義樣式屬性沒有生效，只能使用深度選擇器來解決了。或者去掉scoped，就怕出現樣式汙染。
"12"
>
<
!-- 表單 --
>
"80px"
>
"json資料"
>
v-model=
"input"
placeholder=
"請輸入內容"
size=
"small"
>
<
/el-input>
<
/el-form-item>
<
/el-form>
<
/div>
<
/el-col>
<
!-- 檢視json格式按鈕 --
>
"4">
"primary" @click=
"getjson"
>檢視json
<
/el-button>
<
/el-col>
<
/el-row>
<
/div>
<
!-- dialog --
>
title=
"json資訊"
:visible.sync=
"dialo**isible"
width=
"50%"
:before-close=
"handleclose"
center
class
="json-dialog"
>
"showjson"
class
="json-box"
>
<
/pre>
"footer"
class
="dialog-footer"
>
"dialo**isible = false"
>取 消<
/el-button>
"primary" @click=
"dialo**isible = false"
>確 定<
/el-button
>
<
/span>
<
/el-dialog>
<
/div>
<
/template>
export
default
,
],
"status":1
},
"error_code":0
}`, showjson:
null}}
, methods:).
catch
(_ =>)}
,getjson()
,// 處理json資料，採用正則過濾出不同型別引數
getjsondata
(json)
json = json
.replace
(/&/g
,'&').
replace(/
,'<').
replace
(/>/g
,'>'
)return json.
replace
(/("(\\u[a-za-z0-9]|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[ee][+\\-]?\d+)?)/g
,function
(match)
else
}elseif(
/true|false/
.test
(match)
)elseif(
/null/
.test
(match)
)return
'+ cls +
'">'
+ match +''}
)}}}
<
/script>
"less" scoped>
.json-dialog
.number
.boolean
.null
.key }}
<
/style>
Json資料格式
在web 系統開發中，經常會碰到客戶端和伺服器端互動的問題，比如說客戶端傳送乙個 ajax 請求，然後在伺服器端進行計算，計算後返回結果，客戶端接收到這個響應結果並對它進行處理。那麼這個結果以一種什麼資料結構返回，客戶端才能比較容易和較好的處理呢？通過幾個專案的實踐，我發現 json 格式的資料是一...
JSON資料格式
下面這段文字，摘錄自留作備忘 21世紀初，douglas crockford尋找一種簡便的資料交換格式，能夠在伺服器之間交換資料。當時通用的資料交換語言是xml，但是douglas crockford覺得xml的生成和解析都太麻煩，所以他提出了一種簡化格式，也就是json。json的規格非常簡單，只...
json資料格式
json是一種與語言無關的資料交換的格式，作用 使用ajax進行前後臺資料交換 移動端與服務端的資料交換。1.物件格式 例如 user物件 或者 2.陣列 集合形式 例如 list用json資料格式表示 總結 1.物件格式和資料格式可以相互巢狀 例如 var json 取name 建寧 alert ...