vue显示格式化的json

如图：

基础代码（此段是将json高亮显示的），另外：此处的传入的json是json对象，不是json字符串

// 格式化json
      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>';
          });
      }

注意我在调用时，是先将json转为了json对象 

/**  获取日志信息 */
      getDetail(id){
        getDetail(id).then(response => {
          var data = JSON.parse(response.data.content);
          this.json = this.syntaxHighlight(data);
        });
      },

页面中使用pre来显示 

<el-dialog :title="title" :visible.sync="open" width="1180px" append-to-body> 
      <pre v-html="json"></pre>
    </el-dialog>

样式

<style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
		.string { color: green; }
		.number { color: darkorange; }
		.boolean { color: blue; }
		.null { color: magenta; }
		.key { color: red; }
</style>

 

本文地址：https://blog.csdn.net/xcc_2269861428/article/details/111032881