1. 安装 $ npm install vue-json-viewer@2 --save // Vue2 $ npm install vue-json-viewer@3 --save // Vue3 2. 配置 在main.js中添加以下内容,或者在单独的插件文件中添加。 importVuefrom'vue'importJsonViewerfrom'vue-json-viewer'// Import JsonViewer as a Vue.js pluginVue.use(JsonViewer) ...
obj.parentNode.innerHTML);if(data_type==='array'){obj.parentNode.innerHTML='Array['+data_size+']';}else{obj.parentNode.innerHTML='Object{...}';}}functionshow(obj){varinnerHtml=obj.parentNode.getAttribute('data
第一步,在组件加一个属性: theme="my-awesome-json-theme" <json-viewer v-for="(ite, idx) in finallyJsonList":key="idx"style="width: 100%; min-width: 3.125rem":value="ite":expand-depth="5"copyable boxed theme="my-awesome-json-theme"sort></json-viewer> 第二步,在这个类名里面写样式...
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> methods: { showrawdata(data) {this.loading =true; refund...
vue-json-viewer.js add js file 4年前 yarn.lock Bump acorn from 6.3.0 to 6.4.1 5年前 README MIT vue-json-viewer 安装 示例 支持SSR 图片预览 选项 主题 vue-json-viewer 简单易用的json内容展示组件,支持vue@2.0+,支持SSR,组件支持增量渲染即使大文件json也可以快速渲染。
1. 安装vue-json-viewer插件 代码语言:javascript 复制 npm install vue-json-viewer--save 如果npm安装报错,可换成cnpm安装。 2. 引入插件 引入插件有两种方式,可以全局引入,也可以在单个页面文件中引入该插件。 如果在全局main.js中引入,那么全局可用,无需在单独页面的 components 中注入JsonViewer,可直接调用组件...
<json-viewer:value="jsonData":expand-depth="5"copyableboxedsort></json-viewer> 1. jsonData是需要格式化渲染的数据,如果后台返回的格式为字符串,需要先通过JSON.parse将字符串转化为对象 属性说明: 效果展示: 4.自定义样式 给组件添加theme属性
1. import JsonViewer from 'vue-json-viewer' 2. Vue.use(JsonViewer) 3.组件内使用 jsonData就是你想要渲染的数据 <json-viewer :value="jsonData"></json-viewer> 假数据供测试效果: data(){return {jsonData:{name:"小明",age:18,items:{like:"pingpang",skip:0}}} 效果...
第一步:导入Vue JSONViewer 要使用Vue JSONViewer,首先需要在Vue项目中导入它。可以通过npm安装Vue JSONViewer,并在需要的组件中引入它。 可以使用以下命令来安装Vue JSONViewer: shell npm install vue-json-viewer 然后在组件中引入Vue JSONViewer: javascript import VueJsonViewer from 'vue-json-viewer' Vue.use...
1. **安装`vue-json-viewer`**: 使用npm或yarn安装`vue-json-viewer`: ```bash npm install vue-json-viewer #或 yarn add vue-json-viewer ``` 2. **在组件中引入并使用`vue-json-viewer`**: ```html <!-- YourComponent.vue --> <template> <json-viewer :data="jsonData" :options=...