<think>我们使用
Vue来
格式化JSON。通常，我们会使用一个文本框（如textarea）来输入未
格式化的
JSON，然后通过一个按钮触发
格式化操作，并将
格式化后的
JSON显示在另一个区域（比如另一个textarea或pre标签内）。同时，我们还需要考虑
错误处理，因为输入的可能是无效的
JSON。
步骤：
1
. 创建
Vue实例，包含两个数据属性：input
JSON（存储未
格式化的
JSON字符串）和formatted
JSON（存储
格式化后的
JSON字符串）。
2
. 创建一个方法，例如format
JSON，该方法会尝试解析input
JSON，然后使用
JSON
.stringify的
格式化功能（指定缩进）来生成
格式化的字符串。如果解析失败，则捕获
错误并设置formatted
JSON为
错误信息。
3
. 在模板中，使用两个textarea（一个用于输入，一个用于输出）和一个按钮，按钮点击时调用format
JSON方法。
注意：为了更好的用户体验，我们还可以添加一个“清空”按钮，以及复制到剪贴板的功能。但根据问题要求，我们先实现基本
格式化功能。
代码示例：</think>下面我将详细讲解如何在
Vue 中实现
JSON
格式化功能，并提供完整的
代码示例：
### 解决方案思路
1
. **核心功能**：使用 `
JSON
.parse()` 和 `
JSON
.stringify()` 实现
格式化
2
. **
错误处理**：捕获无效
JSON 的解析
错误
3
. **用户体验**：添加复制功能、
格式化选项和语法高亮
4
. **响应式设计**：利用
Vue 的响应式特性实时更新
### 完整实现
代码
```
vue
<template>
<div class="
json-formatter">
<div class="controls">
<button @click="format
Json">
格式化 JSON</button>
<button @click="copyToClipboard" :disabled="!formatted
Json">
复制结果
</button>
<label>
<input type="checkbox" v-model="autoFormat" />
输入时自动
格式化
</label>
<label>
缩进空格：
<input
type="number"
v-model
.number="indentSpaces"
min="2"
max="8"
/>
</label>
</div>
<div class="editor-container">
<div class="editor">
<h3>输入
JSON：</h3>
<textarea
v-model="input
Json"
@input="autoFormat ? format
Json() : null"
placeholder='{"name":"John", "age":30, "city":"New York"}'
></textarea>
</div>
<div class="result" v-if="formatted
Json">
<h3>
格式化结果：</h3>
<!-- 使用 pre 标签保留格式 -->
<pre v-html="highlighted
Json"></pre>
</div>
</div>
<div v-if="error" class="error">
{{ error }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
input
Json: '',
formatted
Json: '',
error: '',
autoFormat: false,
indentSpaces: 2
};
},
computed: {
// 简单的语法高亮计算属性
highlighted
Json() {
if (!this
.formatted
Json) return '';
return this
.formatted
Json
.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, match => {
let cls = 'value';
if (/:$/
.test(match)) {
cls = 'key';
}
return `<span class="${cls}">${match}</span>`;
})
.replace(/\b(true|false|null)\b/g, '<span class="literal">$&</span>')
.replace(/\b\d+\b/g, '<span class="number">$&</span>');
}
},
methods: {
format
Json() {
this
.error = '';
this
.formatted
Json = '';
if (!this
.input
Json
.trim()) return;
try {
// 核心
格式化逻辑
const parsed =
JSON
.parse(this
.input
Json);
this
.formatted
Json =
JSON
.stringify(
parsed,
null,
this
.indentSpaces
);
} catch (err) {
this
.error = `
JSON 解析
错误: ${err
.message}`;
}
},
copyToClipboard() {
navigator
.clipboard
.writeText(this
.formatted
Json)
.then(() => alert('已复制到剪贴板!'))
.catch(err => console
.error('复制失败:', err));
}
}
};
</script>
<style scoped>
.json-formatter {
max-width: 1000px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.controls {
margin-bottom: 20px;
}
button {
padding: 8px 15px;
margin-right: 10px;
background: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
.editor-container {
display: flex;
gap: 20px;
}
.editor,
.result {
flex: 1;
}
textarea {
width: 100%;
height: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: monospace;
resize: vertical;
}
pre {
height: 300px;
padding: 10px;
border: 1px solid #42b983;
border-radius: 4px;
background: #f8f8f8;
overflow: auto;
white-space: pre-wrap;
}
.error {
color: #ff5252;
margin-top: 10px;
padding: 10px;
background: #fff0f0;
border: 1px solid #ff5252;
border-radius: 4px;
}
/* 语法高亮样式 */
.key {
color: #d14;
}
.value {
color: #099;
}
.number {
color: #164;
}
.literal {
color: #708;
}
</style>
```
###
代码功能详解
1
. **核心
格式化方法 (`format
Json`)**:
- 使用 `
JSON
.parse()` 验证
JSON 有效性
- `
JSON
.stringify(obj, null, indent)` 实现
格式化缩进
-
错误处理捕获无效
JSON 输入
2
. **响应式特性**:
- `v-model` 双向绑定输入框内容
- `computed` 属性实现实时语法高亮
- 数据变化自动更新视图
3
. **语法高亮实现**:
- 使用正则表达式匹配
JSON 关键元素
- 为不同元素类型添加 CSS 类名
- 在样式部分定义颜色方案
4
. **实用功能**:
- 复制到剪贴板功能
- 自动
格式化选项
- 缩进空格数自定义
-
错误提示反馈
5
. **UI 设计**:
- 双栏布局（输入/输出）
- 响应式控制面板
- 清晰的
错误提示
-
代码区域使用等宽字体
### 使用说明
1
. 在左侧输入框粘贴或输入
JSON 数据
2
. 点击"
格式化 JSON"按钮或启用自动
格式化
3
. 右侧查看
格式化结果（带语法高亮）
4
. 使用"复制结果"按钮复制
格式化后的
JSON
5
. 可通过缩进空格设置调整格式层级
### 进阶优化建议
1
. 添加
JSON 压缩功能
2
. 实现
JSON 差异对比
3
. 添加本地存储保存历史记录
4
. 集成更强大的语法高亮库（如 highlight
.js）
5
. 添加
JSON 路径导航功能
扫一扫
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
