需求場景：有時候我們需要將json數(shù)據(jù)直接顯示在頁面上（比如在做一個接口測試的項目撮躁，需要將接口返回的結(jié)果直接展示）金踪，但是如果直接顯示字符串不从，不方便查看惜姐。需要格式化一下。
倆種解決方法椿息，第2種使用插件包比較方便歹袁。
解決方法1：
其實JSON.stringify本身就可以將JSON格式化，直接用法就是：
JSON.stringify(res, null, 2); //res是要JSON化的對象寝优，2是spacing
詳細(xì)優(yōu)化：
<template><div><pre id="result" ref="preRef" /></div></template>
// 在
<script>
export default {
name:"Index",
data(){reutrn{
jsonData : {
"msg": "success", "code": 200,"data": [{"id": 0, "door_name": "1", },{"id": 1, "door_name": "2", },], "count": 2
};
}},
mounted() {
this.$refs.preRef.innerHTML = this.syntaxHighlight(this.jsonData)
},
methods: {
syntaxHighlight(str) {
if (typeof str !== 'string') {
str = JSON.stringify(str, undefined, 2)
}
str = str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
return str.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="scss" scoped>
::v-deep{
#result {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
}
</style>
效果展示：
image.png
解決方法2：安裝vue-json-viewer插件
npm安裝一下
npm install vue-json-viewer --save
代碼實現(xiàn)条舔，掛載vue里面
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)
// or
// components: {JsonViewer}
在template里面加入如下一種： 其中jsonData必須是json類型的數(shù)據(jù)。
<json-viewer :value="jsonData"></json-viewer>
<hr />
<json-viewer
:value="jsonData"
:expand-depth=5
copyable
boxed
sort></json-viewer>
效果展示：
image.png
