vue json格式化展示

2021-05-05 12:33:19 阅读：383 来源： 互联网

标签：bin vue 格式化 json code editor import

import JsonViewer from 'vue-json-viewer' 只可以读：案例：

                    <div  style="  width: 1000px; margin: auto; margin-top: 35px;">
                        <json-viewer
                        v-model="form.headers"
                        :value="form.headers"
                        :expand-depth=5
                        copyable
                        boxed
                        sort></json-viewer>
                    </div>

2.可编辑json前端格式化

npm install vue-json-editor --save

import vueJsonEditor from 'vue-json-editor'

                    <vue-json-editor  
                    v-model="form.headers"
                    :showBtns="false"
                    :mode="'code'"
                    lang="zh"
                    @has-error="onError"  ></vue-json-editor>

npm install bin-code-editor -d

在 main.js 中写入2行

import CodeEditor from 'bin-code-editor';
Vue.use(CodeEditor);
<b-code-editor v-model="jsonStr" :auto-format="true" :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false" ref="editor"></b-code-editor>

标签：bin,vue,格式化,json,code,editor,import
来源： https://www.cnblogs.com/SunshineKimi/p/14731429.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue json格式化展示