解决精度丢失问题，移步我的其他文章
安装vue-JSON-editor1. vue-JSON-editor
npminstallvue-JSON-editor-- save2.在. vue文件中引用
导入jsoneditorfrom ' vue-JSON-editor '； 3 .使用
templatedivclass=' route management ' vue-JSON-editorv-model=' route JSON ' 3360 show btns=' true ' lang=' zh ' @ JSON vue-JSON-editor模块importvuejsoneditorfrom ' vue-JSON-editor ' export default { dada } JSON.stringify ()转换JSON数据JSON components: ) vuejsoneditor )，单击methods:(onjsonchange ()//数据发生变化时触发)，onJsonSave () )//保存触发/deep//JSON editor-vue { height 3360700 px； }/deep/. JSON-save-BTN { cursor : pointer； }}/style 4.效果codemirror json-lint 1.安装
npminstallcodemirrornpminstalljson-lint2.组件
templatedivclass=' JSON-editor ' textarea ref=' textarea '/div/templatescriptimportcodemirrorfrom ' code mirror ' implatescriptimportcodemirom ' code mirror ' import lint.CSS ' import ' code 代码镜像. CSS ' import ' code mirror/theme/ruby blue.CSS ' require (JSON lint ' ) import ' code mirror/mode/javascririor lint '导入'代码模式JSON-lint '导出默认值{ name : ' JSON编辑器'，/* eslint-disable vue/require-prop-types */props 3360 [ ' visable ] data () return(JSONeditor:false )， watch: ) value ) value ) consteditorvalue=this.JSON editor.getvalue==editor value (this.JSON editor.setvalue ) 2 ) }，mounted () this.JSON editor=code mirror.from textarea ) this.$refs.textarea，{ lineNumbers: true，mode : theme: 'rubyblue '，lint 3360 true } this.JSON editor.setvalue ()。 2 ) this.JSONeditor.on(change )，cm=) this.$ emit (changed )， cm.getValue ) ) this.$emit ) ) input )、cm.getValue ) ) this.$ EMI methods : { getvalue (} { return this.JSON en ) : v-deep {.code mirror { height : auto； 最小-高： 300 px； }.code mirror-scroll { min-height 3360300 px； }.cm-s-rubybluespan.cm-string { color : # f 08047； } }}/style 3.使用
首先引入组件，然后直接使用jsoneditorref=' JSON editor ' v-model=' JSON value '/JSON editor4.效果图