vue 格式化显示 json 数据(高亮显示)

第一种:只要求保留格式

不做任何处理的原始数据

代码

css 复制代码
<span>{{data}}</span>

格式化显示

代码

javascript 复制代码
<pre>{{ JSON.stringify(data, null, 2) }}</pre>
解释:
  • JSON.stringify 方法将 currentRow.operationDetails 对象转换为 JSON 字符串。
  • 第二个参数 null 表示不使用任何替换函数。
  • 第三个参数 2 表示缩进为 2 个空格,使 JSON 字符串更易读。
  • <pre> 标签会保留文本中的空格、换行符和其他格式,使其在页面上显示时与原始文本格式一致。

第二种:保留格式,高亮显示

vue3-json-viewer 组件

vue-json-viewer 适配 vue2, vue3-json-viewer 适配 vue3

功能

  1. 格式化显示:

    • 自动格式化 JSON 数据,使其具有良好的缩进和换行,便于阅读。
  2. 可折叠/展开:

    • 支持点击展开或折叠 JSON 对象和数组,方便查看嵌套结构。
  3. 高亮显示:

    • 使用不同的颜色高亮显示不同的数据类型(如字符串、数字、布尔值等),提高可读性。
  4. 复制功能:

    • 提供复制按钮,方便用户复制 JSON 数据。
  5. 主题支持:

    • 支持多种主题,可以根据项目风格进行选择。
  6. 自定义配置:

    • 可以自定义显示深度、是否显示根节点等参数。

安装

csharp 复制代码
yarn add vue3-json-viewer

引入

javascript 复制代码
import { JsonViewer } from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";

常用属性

value: 要显示的 JSON 数据,类型 any

ini 复制代码
<JsonViewer :value="data" />

expand-depth: 初始展开的层级深度,类型 number,默认值: 1

ruby 复制代码
<JsonViewer :value="data" :expand-depth="3" />

copyable: 是否允许复制 JSON 数据,可以传入一个配置对象来自定义复制行为,类型: boolean | CopyConfig,默认值: false

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

boxed: 是否显示带有边框的 JSON 数据,类型: boolean,默认值: false

ini 复制代码
<JsonViewer :value="data" boxed />

highlight-mouseover-node: 当鼠标悬停在节点上时是否高亮显示,类型: boolean,默认值: false

ini 复制代码
<JsonViewer :value="data" highlight-mouseover-node />

sort: 是否以预览模式显示 JSON 数据,不显示展开/折叠按钮,类型: boolean,默认值: false

ini 复制代码
<JsonViewer :value="data" preview-mode />

show-array-index: 是否显示数组的索引,类型: boolean,默认值: true

ruby 复制代码
<JsonViewer :value="data" :show-array-index="false" />

show-length: 是否显示数组和对象的长度,类型: boolean,默认值: true

ruby 复制代码
<JsonViewer :value="data" :show-length="false" />

show-line-number: 是否显示行号,类型: boolean,默认值: false

ini 复制代码
<JsonViewer :value="data" show-line-number />

expanded: 是否默认展开所有节点,类型: boolean,默认值: false

ini 复制代码
<JsonViewer :value="data" expanded />

使用示例

ini 复制代码
<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>
相关推荐
小样还想跑4 分钟前
axios无感刷新token
前端·javascript·vue.js
用户38022585982435 分钟前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag38 分钟前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长44 分钟前
多状态映射不同样式(scss语法)
vue.js·uni-app
长路 ㅤ   1 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
Jinxiansen02112 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
婉婉耶3 小时前
VUE带你乘风破浪~
前端·vue.js
乌兰麦朵4 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai4 小时前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
流星稍逝4 小时前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js