vue 前端渲染 json格式化展示

1.

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>

　　

3.

npm install bin-code-editor -d

在 main.js 中寫入2行

文檔開發參數：https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor

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>