vue中实现json格式化的显示

最新推荐文章于 2025-05-06 11:33:00 发布

码田里的小白菜

最新推荐文章于 2025-05-06 11:33:00 发布

阅读量1.1w

点赞数 10

文章标签： vue.js json javascript

本文链接：https://blog.youkuaiyun.com/weixin_45294459/article/details/128145479

版权

把JSON对象转换为有缩进的 JSON字符串格式

原

效果图

<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>