在Vue 3项目中使用vue-json-viewer来展示JSON数据,可以按照以下步骤进行: 安装vue-json-viewer库: 你可以通过npm或yarn来安装vue-json-viewer库。打开你的终端或命令行工具,然后运行以下命令之一: bash npm install vue-json-viewer --save 或者 bash yarn add vue-json-viewer 在Vue 3项目中引入vue-json-...
<json-viewer :data="jsonData" :options="jsonViewerOptions"></json-viewer> </template> //引入vue-json-viewer组件 import JsonViewer from 'vue-json-viewer'; //注册组件 //注意:在Vue 3中,全局注册组件的方式略有不同 //使用app.component方法 export default { components: { JsonViewer, }, d...
<template><json-viewer:value="jsonData"copyableboxedsort/></template>import{ reactive, ref }from"vue";letobj = {name:"qiu",//字符串age:18,//数组isMan:false,//布尔值date:newDate(),fn:()=>{},arr:[1,2,5] };constjsonData = reactive(obj);conststrData = ref("http://www.baidu....
import "@/assets/scss/jvStyle.scss"; import "vue3-json-viewer/dist/index.css"; <json-viewer :value="viewParam" boxed :sort="true" :expand-depth=5 :copyable="{ copyText: '复制代码', copiedText: '复制成功' }" @copied="textCopy" ></json-viewer> main.js import {createApp} from '...
当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。1. 安装$ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 ...
npm install vue3-json-viewer --save 2.在需要格式化json的页面引用 formData.event是需要展示的json内容 // json格式化import{JsonViewer}from'vue3-json-viewer'import'vue3-json-viewer/dist/index.css'<JsonViewer:value="formData.event":expand-depth="5"copyablesortclass="my-awesome-json-theme"theme="...
JSON-Viewer English| 中文 一个JSON可视化工具 技术栈:Vue 3 + Vite +TS +Antv/G6+ Pinia +CodeMirror 全新版本(2.x.x) 新特性 新增语言(中/英)切换,全站适配 新增15 种主题色,主题色全站适配 新增亮、暗主题切换功能,编辑器主题跟随切换 新增渲染方式(自动渲染、手动渲染)选择 ...
// Vue3 npm install vue-json-viewer@3 --save 1. 2. 3. 4. 2.引入并全局注册 main.js文件中 import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer) 1. 2. 3.使用 <json-viewer:value="jsonData":expand-depth="5"copyableboxedsort></json-viewer> ...
// Vue2yarn add vue-json-viewer@2// Vue3yarn add vue-json-viewer@3 2.引入并全局注册 在main.js(入口文件里面) 1. import JsonViewer from 'vue-json-viewer' 2. Vue.use(JsonViewer) 3.组件内使用 jsonData就是你想要渲染的数据 <json-viewer :value="jsonData"></json-viewer> ...
{JsonViewer} from "vue3-json-viewer" // if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css" import "vue3-json-viewer/dist/index.css"; import { reactive, ref } from "vue"; let obj = { name: "qiu",//string age: 18,//Array isMan:false,...