格式化JSON

最新推荐文章于 2025-06-25 10:49:26 发布

waitHiy.

最新推荐文章于 2025-06-25 10:49:26 发布

阅读量484

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： json javascript 前端

本文链接：https://blog.csdn.net/colorful_S/article/details/130688664

js 专栏收录该内容

2 篇文章

订阅专栏

这是一个Vue组件示例，展示如何通过点击按钮触发JSON字符串的格式化。组件包含一个输入框用于输入JSON文本，点击格式化JSON按钮后，利用JSON.parse和JSON.stringify方法将JSON文本转换为带有缩进的格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 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 lang="ts" setup>

import { ref } from 'vue'
const jsonStr = ref('')

const clickFormat = () => {
    // 1、JSON.parse：把JSON字符串转换为JSON对象
    // 2、JSON.stringify：把JSON对象 转换为 有缩进的 JSON字符串格式
    jsonStr.value = JSON.stringify(JSON.parse(jsonStr.value), null, '\t')
}
</script>

<style scoped>

</style>