json代码高亮显示插件vue-json-pretty

vue-json-pretty的用法

vue-json-pretty是用来格式化展示json数据的

GitHub ： vue-json-pretty的详细用法

用法

1. npm下载

npm install vue-json-pretty --save

2. 引入

import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

3. 注册组建

export default {
  components: {
    VueJsonPretty,
  },
};

4. 使用

<template>
  <div>
    //data可以是请求后端返回的数据
    <vue-json-pretty :path="'res'" :data="{ key: 'value' }" > </vue-json-pretty>
  </div>
</template>
<script>
  import VueJsonPretty from 'vue-json-pretty';
  import 'vue-json-pretty/lib/styles.css';
  import {
    getData
  } from "@/api/mongodb/index.js";
  export default {
    name : 'cluster',
    components : {VueJsonPretty},
    data(){
        return{
        	data : {}
        }
    }
  },
  //例如下面的获取后端返回的json数据，并赋值
  async getData(row){
        let namespace = row.namespace;
        let name = row.metaName;
        const params = {
          namespace,
          name
        };
        const res = await getData(params);  //getData是在引入的api中定义好的
        this.json = res.content;
  }
</script>

5. 效果
   json格式的数据高亮展示
   
6. 报错信息
   如果有报错的话，看你的项目用的vue的版本
   
   如果你用的是vue2的话，就安装1.7.1的版本，即

npm install [email protected]