Realize the display of json format in vue

Convert a JSON object to an indented JSON string format

Original

 renderings

 

<template>
  <div class='content'>
    <el-button type="primary" @click="clickFormat">格式化JSON</el-button>
    <el-input v-model="jsonStr" autosize type="textarea" placeholder="Please input" />
  </div>
</template>

<script>

export default {
  name: "manage",
  data() {
    return {
      jsonStr: ''
    }
  },
  methods:{
    clickFormat(){
  // 1、JSON.parse：把JSON字符串转换为JSON对象
  // 2、JSON.stringify：把JSON对象 转换为 有缩进的 JSON字符串格式
  this.jsonStr = JSON.stringify(JSON.parse(this.jsonStr), null, '\t')
}
  }
}
</script>

<style scoped>

</style>