151  
查询码:00000585
代码数据在系统中可视化
作者: 郁冲冲 于 2019年12月26日 发布在分类 / 人防组 / 人防前端 下,并于 2019年12月26日 编辑
代码数据在系统中可视化

使用场景:

在系统中需要展示代码数据


vue-json-editor使用

1.npm 下载版本

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>
tips:数据要是json格式


 推荐知识

 历史版本

修改日期 修改人 备注
2019-12-26 14:21:06[当前版本] 郁冲冲 1.1.0
2019-12-26 14:20:38 郁冲冲 1.1.0
2019-12-26 14:19:39 郁冲冲 1.1.0

知识分享平台 -V 4.8.7 -wcp