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>

vue 前端渲染 json格式化展示

上一篇:chrome 修改css教程


下一篇:HTML+CSS+JS制作一个蓝色简约动态时钟