Vue.js JSON树组件 - vue-json-tree

Vue.js JSON树组件 - vue-json-tree
插件名称 vue-json-tree
发布时间 2020年12月27日
插件作者 myst729

Vue组件,以可折叠的树结构呈现JSON数据。

安装和下载:

npm install --save vue-json-tree

用法

在浏览器中使用

  • 随同Vue一起包含CSS和JS,因此您将获得一个<json-tree>组件。
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-json-tree@0.4.1/dist/json-tree.js"></script>
  • 用数据实例化组件。
<div id="app"></div>
<script>
  new Vue({
    template: '<json-tree :raw="sample"></json-tree>',
    el: '#app',
    data: {
      sample: '{"foo": "bar"}'
    }
  })
</script>

webpackvue-loader一起使用

  • vue-json-tree通过NPM安装软件包。
npm install --save vue-json-tree
  • 导入SFC(嵌入CSS)并将其注册为组件(全局或在另一个组件中)。
import JsonTree from 'vue-json-tree'
Vue.component('json-tree', JsonTree)