实现原理
通过函数 syntaxHighlight 使用html标签包装json数据，并添加样式
完整范例代码<template> <div style=”width: 300px;”> <pre v-html=”formattedJSON”></pre> </div></template><script> function syntaxHighlight(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>’; }); } export default { mounted() { this.formattedJSON = syntaxHighlight(this.tabConfig) }, data() { return { tabConfig: { “defaultTab”: “基础信息”, “tabList”: [ { “label”: “基础信息”, “show”: true }, { “label”: “职业规划”, “age”: 30, }, { “label”: “相关要件”, } ] }, formattedJSON: ” } }, }</script><style scoped> /deep/ pre { outline: 1px solid #ccc; padding: 5px; margin: 5px; } /deep/ .string { color: green; } /deep/ .number { color: darkorange; } /deep/ .boolean { color: blue; } /deep/ .null { color: magenta; } /deep/ .key { color: red; }</style>
后来逐渐有广州花城的，
