vue-ag凯发k8国际

文章目录

• • • • 背景
      • 效果预览
      • 具体实现
      • • 相关依赖
        • vue部分
        • js部分

背景

​ 有些时候我们系统的配置、为了方便会以json的形式保存使用，或者其他需要修改json的场景，一款方便好用的编辑器就显得很重要了，本文采用的是vue-json-editor组件。

效果预览

​ 可以看到数据层级非常清晰，还可以选择对齐方式、切换文本、表单、树形等。

具体实现

相关依赖

"vue-json-editor": "^1.4.3"

vue部分

js部分

import vuejsoneditor from 'vue-json-editor'components: { vuejsoneditor }// 这里将json对象转换为json字符串 let jsonstr = json.stringify(this.jsoneditorvalue)/** 判断最终保存数据是否为正确的json格式 */ isjson(str) {if (typeof str == 'string') {try {let obj = json.parse(str)return !!(typeof obj == 'object' && obj)} catch (e) {console.log('error：' str '!!!' e)return false}}console.log('it is not a string!') }

总结

以上是ag凯发k8国际为你收集整理的vue-json编辑器组件的简单使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。