vue json格式化插件

// Vue JSON格式化插件示例代码

// 引入vue-json-pretty库，用于在Vue项目中展示和格式化JSON数据
import Vue from 'vue';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

// 注册组件
Vue.component('vue-json-pretty', VueJsonPretty);

// 在组件中使用
export default {
  name: 'App',
  data() {
    return {
      // 定义一个JSON对象作为示例数据
      jsonData: {
        name: "John",
        age: 30,
        address: {
          city: "New York",
          zip: "10001"
        },
        hobbies: ["reading", "traveling"]
      }
    };
  },
  methods: {
    // 示例方法：更新JSON数据
    updateJsonData() {
      this.jsonData.age = 31;
    }
  }
};

解释说明：

1. 引入库：我们使用了vue-json-pretty库来帮助我们在Vue项目中展示和格式化JSON数据。
2. 注册组件：通过Vue.component方法将vue-json-pretty注册为全局组件。
3. 定义数据：在组件的data函数中定义了一个名为jsonData的JSON对象，作为示例数据。
4. 使用组件：在模板中可以直接使用<vue-json-pretty>标签来展示jsonData的内容。
5. 更新数据：提供了一个updateJsonData方法来演示如何动态更新JSON数据。