本文介绍vue3如何进行json数据pretty展示

1 vue3-json-viewer

1.1 安装

 npm install vue3-json-viewer --save

1.2 全局引入

在main.ts中引入，然后直接在组件中使用

import { createApp } from 'vue'
import App from './App.vue'
import JsonViewer from "vue3-json-viewer"

const app=createApp(App)
app.use(JsonViewer)
app.mount('#app')

<json-viewer :value="jsonData" copyable boxed sort></json-viewer>

1.3 局部引入

如果使用频率少，只在某个组件上使用，那么在单个组件上进行引入使用即可,选项式API使用如下方式。

<script>
import { JsonViewer } from "vue-json-viewer";
import "vue-json-viewer/style.css";
export default {
  components: {
    JsonViewer,
  },
}
</script>

组合式API语法糖形式直接导入即可使用

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

2 vue-json-pretty

​ 项目地址: vue-json-pretty

2.1 安装

npm install vue-json-pretty --save
yarn add vue-json-pretty

2.2引入使用

全局引入同上，仅演示局部引入方式.

<template>
  <div>
    <vue-json-pretty :data="{ key: 'value' }" />
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: {
    VueJsonPretty,
  },
};
</script>

同样，组合式API语法糖形式直接引入即可使用

<script setup>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
</script>

2.3 Props

​ vue-json-pretty 基本属性

我更喜欢使用vue-json-pretty，可定制性要好些。