npminstallvue-json-viewer--save 引入插件并注册 官网地址:https://www.npmjs.com/package/vue-json-viewer 2.1 全局注册组件 在全局 main.js 中引入,在 main.js 文件中添加: importJsonViewerfrom'vue-json-viewer'Vue.use(JsonViewer) 2.2 单个页面局部
Vue.use(JsonViewer) 1. 2. 3. 4. 5. 使用插件 初次使用者可能不知道如何正确地将数据传递给 Vue-JSON-Viewer 组件,或者遇到数据更新组件未响应的情况。我们可以使用:value属性来绑定 JSON 数据,如下所示: import JsonViewer from 'vue-json-viewer' const jsonStr = '{"data":[{"name":"蒙奇...
1. 安装vue-json-viewer插件 代码语言:javascript 代码运行次数:0 运行 AI代码解释 npm install vue-json-viewer--save 如果npm安装报错,可换成cnpm安装。 2. 引入插件 引入插件有两种方式,可以全局引入,也可以在单个页面文件中引入该插件。 如果在全局main.js中引入,那么全局可用,无需在单独页面的 components 中...
在Vue项目中,若需要展示JSON数据,可以使用vue-json-viewer插件。该插件能够将复杂的JSON数据以可视化的方式展示出来,支持高亮、折叠、复制等功能,非常适用于需要在Vue项目中展示JSON数据的场景。以下是关于vue-json-viewer插件的详细使用指南: 一、插件安装 vue-json-viewer插件可以通过npm或yarn进行安装。以下是基于npm...
2. 配置在main.js中添加以下内容,或者在单独的插件文件中添加。import Vue from 'vue' import JsonViewer from 'vue-json-viewer' // Import JsonViewer as a Vue.js plugin Vue.use(JsonViewer) 引入样式import 'vue-json-viewer/style.css' 3. 使用<json-viewer :value="jsonData"></json-viewer> ...
app.use(JsonViewer) app.mount('#app') App.vue <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...
Vue.use(JsonViewer) 3.组件内使用 jsonData就是你想要渲染的数据 <json-viewer :value="jsonData"></json-viewer> 假数据供测试效果: data(){ return { jsonData:{ name:"小明", age:18, items:{ like:"pingpang", skip:0 } } } } 效果图: 4.一点使用技巧、心得 在使用类似插件的时候,先写...
演示地址: http://json.imlht.com/vue-json-viewer-demo.html json-viewer 常用的 JSON 格式化工具 JSON 是一种轻量级的数据交换格式, 相信大家用得比较多, 平时也用了很多格式化工具, 例如我最常用的 Json.cn, 还有这个 BeJson, 前者清爽无广告, 后者性能给力(有广告), 可以复制下面的 JSON 体验一下: JSO...
import{createApp}from"vue";importAppfrom"./App.vue";importJsonViewerfrom"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";constapp=createApp(App);app.use(JsonViewer);app.mount("#app...
import JsonViewer from 'vue-json-viewer'Vue.use(JsonViewer); vue <el-dialogtitle="退款数据详情":visible.sync="dialogvisible2"v-if="dialogvisible2"><json-viewer:value="jsondata"sort :expand-depth="5"></json-viewer></el-dialog>