版本："vue-json-editor": "^1.4.3"

（1）下载依赖，npm install vue-json-editor 或 yarn add vue-json-editor

（2）使用 

<div class="code-json-editor"><vue-json-editorv-model="jsonEditorData":showBtns="false" // 不显示保存按钮:mode="'code'" // 默认选择code格式lang="zh" // 中文:expandedOnStart="true" // 默认展开数据@json-change="jsonEditorDataChange" // 当输入的数据符合json对象格式时@has-error="jsonEditorDataHasError"/> // 当输入的数据不符合json对象格式时</div><div v-if="showErrorTips">格式错误，请输入json格式</div>
</div><script>
import VueJsonEditor from 'vue-json-editor'
export default {components: {VueJsonEditor},data () {return {showErrorTips: false,jsonEditorData: {}}},methods: {jsonEditorDataChange (json) {this.jsonEditorData = jsonthis.showErrorTips = false},jsonEditorDataHasError (error) {// 当清空输入的数据时if (error.message && error.message.includes("Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'EOF'")) {this.jsonEditorData= {}this.showErrorTips = false} else {this.showErrorTips = true}}}
}
</script>// 隐藏 右上角链接
<style scoped="scoped">.code-json-editor >>> .jsoneditor-poweredBy {display: none !important;}
</style>