### 推荐适用于
Vue3 的
JSON 格式化库
对于
Vue3 项目，可以使用 **`
vue3-
json-viewer`** 来实现
JSON 数据的
格式化和可视化
展示[^2]。该库支持多种功能特性，例如展开深度控制、复制按钮、排序选项以及扩展模式等功能。
#### 安装方法
通过 npm 下载 `
vue3-
json-viewer` 库：
```bash
npm install
vue3-
json-viewer --save
```
#### 全局注册方式
在项目的入口文件（如 `main
.ts` 或 `main
.js`）中进行全局注册：
```typescript
import { createApp } from &#
39;
vue&#
39;;
import App from &#
39;
./App
.vue&#
39;;
// 引入
vue3-
json-viewer 及其样式文件
import
JsonViewer from "
vue3-
json-viewer";
import "
vue3-
json-viewer/dist/index
.css";
const app = createApp(App);
app
.use(
JsonViewer)
.mount(&#
39;#app&#
39;);
```
#### 组件局部使用示例
如果仅需在特定组件中使用，则可以直接导入并声明为子组件：
```html
<template>
<div>
<!-- 遍历
JSON 数组 -->
<div v-for="(item, index) in parsedOldData" :key="index">
<
json-viewer
:value="item"
:expand-depth="5"
copyable
boxed
sort
expanded />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from &#
39;
vue&#
39;;
import
JsonViewer from &#
39;
vue3-
json-viewer&#
39;;
import &#
39;
vue3-
json-viewer/dist/index
.css&#
39;;
export default defineComponent({
components: {
JsonViewer,
},
props: {
dialogData: {
type: Object,
required: true,
},
},
setup(props) {
const parsedOldData = computed(() =>
JSON.parse(props
.dialogData
.oldData));
return {
parsedOldData,
};
},
});
</script>
```
上述代码
展示了如何解析字符串形式的
JSON 并将其传递给 `<
json-viewer>` 组件以实现可视化的渲染效果。
#### 替代方案
除了 `
vue3-
json-viewer` 外，还可以考虑其他替代方案来满足不同的需求：
1
. 使用原生 HTML `<pre>` 标签配合 JavaScript 方法 `
JSON.stringify()` 实现简单的
JSON 格式化显示[^
3]:
```html
<template>
<pre>{{ formatted
Json }}</pre>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect } from &#
39;
vue&#
39;;
export default defineComponent({
setup() {
const
jsonData = ref({ key: &#
39;value&#
39;, nested: { innerKey: &#
39;innerValue&#
39; } });
const formatted
Json = ref(&#
39;&#
39;);
watchEffect(() => {
formatted
Json.value =
JSON.stringify(
jsonData
.value, null, 4);
});
return {
jsonData,
formatted
Json,
};
},
});
</script>
```
2
. 自定义过滤器或工具函数处理复杂场景下的
JSON 显示逻辑[^4]。
---
###
在前端开发中，当需要展示JSON数据时，可以使用<code><pre></code>标签直接展示已格式化的数据。若数据是字符串格式，则需先通过<code>JSON.stringify</code>进行转换。对于非JSON格式的字符串，可以使用过滤器或直接处理后再显示。
扫一扫
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
