Json to Render

快速上手

通过 npm 安装

npm i @json2render/vue-full
1

实现一个简单示例

main.js

import { createApp } from 'vue'
import App from './App.vue'
import JRender from '@json2render/vue-full'

createApp(App).use(JRender).mount('#app')
1
2
3
4
5

App.vue

<template>
  <div>
    <v-jrender v-model="model" :fields="fields" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {
      model: { text1: 'Hello world!!' },
      fields: [
        { component: 'p', text: '$:model.text1' },
        { component: 'input', value: 'model.text1' },
      ],
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20