美文网首页
Vue中实现JSON字符串代码格式化

Vue中实现JSON字符串代码格式化

作者: AR7_ | 来源:发表于2020-12-23 15:31 被阅读0次

    在Vue项目开发,遇到一个需求,需要将JSON代码呈现在页面上,并且是格式化的方式,主要实现方式如下:

    <el-input class="json-text" type="textarea" :rows="20" placeholder="请输入内容" v-model="flowJSON"></el-input>
    
    var json = [{ "id": "4c5849f2.4369f8", "type": "tab", "label": "1111", "disabled": false, "info": "" }, { "id": "36205d7f.dd6f92", "type": "random_number", "z": "4c5849f2.4369f8", "name": "random_number", "displayName": "random_number", "min": "0", "max": "500", "topic": "number", "x": 370, "y": 240, "wires": [["cbe495b1.fa9898"]] }, { "id": "ecdd8af1.52eb48", "type": "log", "z": "4c5849f2.4369f8", "name": "log", "displayName": "log", "log_to_console": "true", "log_to_client": "true", "log_to_mem": "false", "x": 830, "y": 240, "wires": [] }, { "id": "cbe495b1.fa9898", "type": "filein", "z": "4c5849f2.4369f8", "name": "filein", "displayName": "filein", "filename": "", "x": 620, "y": 260, "wires": [["ecdd8af1.52eb48"]] }]
    
    // this.flowJSON = JSON.stringify(json, null, "\t")
    this.flowJSON = JSON.stringify(json, null, "  ")
    

    经过格式化代码如下:

    [
      {
        "id": "4c5849f2.4369f8",
        "type": "tab",
        "label": "1111",
        "disabled": false,
        "info": ""
      },
      {
        "id": "36205d7f.dd6f92",
        "type": "random_number",
        "z": "4c5849f2.4369f8",
        "name": "random_number",
        "displayName": "random_number",
        "min": "0",
        "max": "500",
        "topic": "number",
        "x": 370,
        "y": 240,
        "wires": [
          [
            "cbe495b1.fa9898"
          ]
        ]
      },
      {
        "id": "ecdd8af1.52eb48",
        "type": "log",
        "z": "4c5849f2.4369f8",
        "name": "log",
        "displayName": "log",
        "log_to_console": "true",
        "log_to_client": "true",
        "log_to_mem": "false",
        "x": 830,
        "y": 240,
        "wires": []
      },
      {
        "id": "cbe495b1.fa9898",
        "type": "filein",
        "z": "4c5849f2.4369f8",
        "name": "filein",
        "displayName": "filein",
        "filename": "",
        "x": 620,
        "y": 260,
        "wires": [
          [
            "ecdd8af1.52eb48"
          ]
        ]
      }
    ]
    

    相关文章

      网友评论

          本文标题:Vue中实现JSON字符串代码格式化

          本文链接:https://www.haomeiwen.com/subject/jdtunktx.html