vue json 编辑器

<template>
  <div id="app">
    <json-editor v-model="jsonData"></json-editor>
  </div>
</template>

<script>
import JsonEditor from 'vue-json-editor';

export default {
  name: 'App',
  components: {
    JsonEditor
  },
  data() {
    return {
      jsonData: {
        key1: "value1",
        key2: "value2"
      }
    };
  }
};
</script>

<style>
/* 添加一些样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 div 容器，并在其中嵌入了 json-editor 组件。通过 v-model 指令将组件与 jsonData 数据绑定，使得 JSON 数据可以在编辑器中进行双向绑定。

2. 脚本部分 (<script>):

   • 导入了 vue-json-editor 组件。
   • 注册了 JsonEditor 组件。
   • 在 data 函数中定义了一个初始的 JSON 对象 jsonData，它包含了两个键值对。

3. 样式部分 (<style>):

   • 添加了一些基础样式，使页面看起来更美观。

这个示例代码展示了如何使用 vue-json-editor 组件来创建一个简单的 JSON 编辑器，并且通过 Vue 的双向数据绑定特性实现 JSON 数据的实时编辑和更新。