Vue中如何实现JSON数据格式化与高亮显示

Vue项目中，常常需要展示JSON数据。如果直接展示原始数据，不仅格式混乱，还难以阅读。接下来，就给大家分享在Vue里格式化显示JSON数据，甚至实现高亮显示的方法。

一、仅保留格式的显示方法

在处理JSON数据展示时，若只要求保留数据格式，不做其他处理，原始数据看起来可能是这样：

{'action':'查询检验报告', 'xepoType':'血常规'}

在Vue中，可通过以下代码实现格式化显示：

<pre>{{ JSON.stringify(data, null, 2) }}</pre>

这里使用了JSON.stringify方法，它的作用是将data（假设data是包含JSON数据的对象，比如currentRow.operationDetails ）转换为JSON字符串。第二个参数null表示不使用任何替换函数，保持数据原样转换。第三个参数2则是设置缩进为2个空格，这样生成的JSON字符串会有合理的缩进，更方便阅读。而<pre>标签的作用是保留文本中的空格、换行符等格式，确保在页面上显示的内容和转换后的格式一致。效果类似如下：

{ 'action':'查询检验报告', 'xepoType':'血常规' }

二、保留格式且高亮显示的方法

如果想要实现JSON数据保留格式并且高亮显示，vue3-json-viewer组件能帮上大忙（vue-json-viewer适配Vue2，vue3-json-viewer适配Vue3 ）。下面来详细了解它。

（一）组件功能介绍

格式化显示：这个组件能自动对JSON数据进行格式化处理，添加合适的缩进和换行，让数据结构一目了然。
可折叠/展开：支持点击操作来展开或折叠JSON对象和数组，方便查看嵌套较深的数据结构。
高亮显示：它会用不同颜色区分字符串、数字、布尔值等不同的数据类型，大大提高了数据的可读性。
复制功能：组件提供了复制按钮，方便用户复制JSON数据。
主题支持：有多种主题可供选择，可以根据项目整体风格来挑选合适的主题。
自定义配置：能自定义显示深度、是否显示根节点等参数，满足不同的展示需求。

（二）安装与引入

安装：使用yarn进行安装，在命令行输入：

yarn add vue3-json-viewer

引入：在项目的JavaScript文件中，添加以下代码引入组件和样式：

import { JsonViewer } from "vue3-json-viewer"; import "vue3-json-viewer/dist/index.css";

（三）常用属性介绍

value：用于指定要显示的JSON数据，数据类型是any。比如：

<JsonViewer :value="data" />

expand-depth：表示初始展开的层级深度，类型为number，默认值是1。可以根据需求调整，像这样：

<JsonViewer :value="data" :expand-depth="3" />

copyable：决定是否允许复制JSON数据，也可以传入一个配置对象来自定义复制行为，类型为boolean | CopyConfig，默认值是false。示例如下：

<JsonViewer :value="data" copyable /> <!-- 或者 --> <JsonViewer :value="data" :copyable="{ copyText: '复制', copiedText: '已复制' }" />

boxed：控制是否显示带有边框的JSON数据，类型是boolean，默认值为false。使用方式如下：

<JsonViewer :value="data" boxed />

highlight-mouseover-node：当鼠标悬停在节点上时，是否高亮显示该节点，类型为boolean，默认值是false。代码示例：

<JsonViewer :value="data" highlight-mouseover-node />

sort：设置是否以预览模式显示JSON数据，在这种模式下不显示展开/折叠按钮，类型为boolean，默认值是false。例如：

<JsonViewer :value="data" preview-mode />

show-array-index：决定是否显示数组的索引，类型为boolean，默认值是true。可按需修改：

<JsonViewer :value="data" :show-array-index="false" />

show-length：控制是否显示数组和对象的长度，类型为boolean，默认值是true。示例：

<JsonViewer :value="data" :show-length="false" />

show-line-number：用于设置是否显示行号，类型为boolean，默认值是false。使用方法：

<JsonViewer :value="data" show-line-number />

expanded：设置是否默认展开所有节点，类型为boolean，默认值是false。如：

<JsonViewer :value="data" expanded />

（四）使用示例

假设有这样两组需要对比显示的JSON数据：

在Vue中，可以通过以下代码实现对比展示：

<el-row :gutter="20"> <el-col :span="12"> <div class="compare-title">变更前</div> <JsonViewer :value="beforeData" :expand-depth="3" copyable boxed /> </el-col> <el-col :span="12"> <div class="compare-title">变更后</div> <JsonViewer :value="afterData" :expand-depth="3" copyable boxed /> </el-col> </el-row>

通过上述方法，就像在vue中实现JSON数据清晰、直观、高亮的格式化显示。