vue3 页面展示json字符串

### Vue3 中展示 JSON 字符串的方法 在 Vue3 中展示 JSON 字符串可以通过以下方式实现。首先，可以使用 JavaScript 的 `JSON.stringify()` 方法将对象转换为 JSON 字符串，并通过模板插值绑定到页面上。为了使 JSON 格式更加直观，可以设置 `JSON.stringify()` 的第二个参数（replacer）和第三个参数（space），以生成带有缩进的格式化字符串[^1]。 以下是具体的示例代码： ```vue <template> <div> <h3>JSON 数据展示</h3> <pre>{{ formattedJson }}</pre> </div> </template> <script> import { ref, computed } from "vue"; export default { setup() { // 定义原始 JSON 数据 const jsonData = ref({ products: [ { id: 1, productName: "P01", price: "114.00" }, { id: 2, productName: "P02", price: "333.00" }, { id: 3, productName: "P03", price: "743.00" }, { id: 4, productName: "P04", price: "449.00" }, ], }); // 使用 computed 属性生成格式化的 JSON 字符串 const formattedJson = computed(() => JSON.stringify(jsonData.value, null, 2) // 设置缩进为 2 个空格 ); return { jsonData, formattedJson, }; }, }; </script> <style scoped> pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; } </style> ``` #### 代码解析 - `<pre>` 标签用于保留 JSON 字符串中的换行和缩进，确保输出格式整齐[^1]。 - `JSON.stringify()` 方法的第三个参数设置为 `2`，表示生成的 JSON 字符串将具有两级缩进。 - 使用 Vue3 的 `computed` 属性动态计算格式化后的 JSON 字符串，确保数据变化时自动更新显示内容[^2]。 此外，如果需要更复杂的交互功能（如折叠/展开 JSON 结构），可以引入第三方库，例如 `vue-json-pretty`，它提供了丰富的配置选项和样式支持[^3]。 ### 引入 vue-json-pretty 示例 安装依赖： ```bash npm install vue-json-pretty ``` 使用组件： ```vue <template> <div> <h3>JSON 数据展示 (vue-json-pretty)</h3> <vue-json-pretty :data="jsonData" /> </div> </template> <script> import VueJsonPretty from "vue-json-pretty"; import "vue-json-pretty/lib/styles.css"; // 引入样式文件 import { ref } from "vue"; export default { components: { VueJsonPretty, }, setup() { const jsonData = ref({ products: [ { id: 1, productName: "P01", price: "114.00" }, { id: 2, productName: "P02", price: "333.00" }, { id: 3, productName: "P03", price: "743.00" }, { id: 4, productName: "P04", price: "449.00" }, ], }); return { jsonData, }; }, }; </script> ``` #### 第三方库优势 `vue-json-pretty` 提供了交互式 JSON 展示功能，用户可以点击节点展开或折叠内容，适合需要高级功能的场景[^3]。 ---