iview 使用vue-json-editor

最新推荐文章于 2024-08-21 08:36:40 发布

Wjhsmart

最新推荐文章于 2024-08-21 08:36:40 发布

阅读量1.1w

点赞数

分类专栏： Vue 文章标签： iview vue-json-editor npm

本文为博主原创文章，欢迎大家转载，转载请注明出处：

本文链接：https://blog.csdn.net/Wjhsmart/article/details/85757045

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、进入到自己的项目，使用npm安装vue-json-editor

npm install vue-json-editor --save

2、在vue组件中使用vue-json-editor

<template>
  <div>
    <p>vue-json-editor使用</p>
    <!--在模板中使用vue-json-editor-->
    <vue-json-editor v-model="json" :showBtns="true" @json-change="onJsonChange"></vue-json-editor>
  </div>
</template>

<script>
  // 引入vue-json-editor模块
  import vueJsonEditor from 'vue-json-editor'
  export default {
    data () {
      json: {
        msg: 'demo of jsoneditor'
      }
    },

    // 注入vueJsonEditor组件
    components: {
      vueJsonEditor
    },

    methods: {
      onJsonChange (value) {
        console.log('value:', value)
      }
    }
  }
</script>

3、效果图