分享将json格式的数据格式化展示到界面中，高亮、折叠、自定义样式

<>一. 格式化json数据，高亮、自定义样式

* 定义处理函数
* 调用函数，将待处理的数据传入
* 利用<pre v-html></pre>标签（格式化文本）展示 // 1. 定义处理函数,在这里实现样式的自定义 export default
function syntaxHighlight(json:any){ 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) { let cls = 'color:#D19A66'; if (/^"/.test(match)) { if (/:$
/.test(match)) { cls = 'color:#F92A0F'; } else { cls = 'color:#44C91B'; } } else
if (/true|false/.test(match)) { cls = 'color:#1B73C9'; } else if (/null/.test(
match)) { cls = 'color:#C586C0'; } return `<span style=${cls}>${match}</span>`;
}); } // 2. 调用函数，将待处理的数据传入 const data = reactive({ code:'200', message:'成功',
data:[ { name:'三国演义', id:'sgyy' }, { name:'西游记', id:'xyj' } ] }) const jsonData
= syntaxHighlight(data) // 3. 利用`<pre v-html></pre>`标签（格式化文本）展示 <pre v-html=
"jsonData"></pre>

<>二. 格式化json数据，折叠、自定义样式

* 安装插件： // 在vue2中 npm install vue-json-viewer --save // 在vue3中 npm install
clipboard--save npm install vue3-json-viewer --save
* 引入并注册 // 在vue2中 import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer)
// 在vue3中 import JsonViewer from "vue3-json-viewer" const app=createApp(App) app
.use(JsonViewer) app.mount('#app')
* 使用 <json-viewer :value="jsonData" :expand-depth="5" copyable boxed sort
theme="my-json-theme"> </json-viewer> // 自定义主题样式 // vue2中 .my-json-theme{ //
vue2样式穿透 /deep/ .jv-key{} /deep/ .jv-item{} /deep/ .jv-string{} /deep/ .jv-
boolean{}... } // vue3中 .jv-my-json-theme{ :deep(.jv-key){}... }
* api说明
参数说明默认值
valueJSON数据（支持和v-model一起之用）必填
expand-depth默认展开的层级1
copyable显示复制按钮，可自定义按钮{copyText:‘copy’}，或者使用truefalse
sort按照key排序（key的首字母的顺序）false
boxed给组件添加一个盒状样式false
theme添加一个自定义的样式class用作主题jv-light
* 效果

• « 上一篇：sort自定义排序和lambda配合使用
• » 下一篇：家用洗地机到底好不好用？性价比高的洗地机推荐