SOURCE

var vm = new Vue({
    el: '#app',
    data: {
        // 动态表单排版
        dynamicForm: [
            {
                title: '姓名', // 表单项名称
                field: 'name', // 关联字段
                type: 'text', // 组件类型
                tips: '请输入姓名', // 提示文本
                options: [], // 选项 or 配置
                rules: ['required', 'min:3', 'max:5'], // 验证规则, 如果有需要
                value: '' // 绑定值
            },
            {
                title: '性别',
                field: 'gender',
                type: 'radio',
                tips: '',
                options: [
                    {
                        text: '男生',
                        value: 1
                    },
                    {
                        text: '女生',
                        value: 2
                    }
                ],
                rules: ['required', 'min:3', 'max:5'],
                value: ''
            },
            {
                title: '出生日期',
                field: 'birthday',
                type: 'date',
                tips: '请选择出生日期',
                options: [],
                rules: ['required', 'min:3', 'max:5'],
                value: ''
            }
        ]
    },
    methods: {

        submit:function() {

            alert(JSON.stringify(this.getFormResultToObject()))

        },

        // 获取表单结果到对象
        getFormResultToObject: function() {
            let result = {}

            for (let i=0; this.dynamicForm.length> i; i++) {
                let formItem = this.dynamicForm[i]

                result[formItem.field] = formItem.value
            }

            return result;
        }
        

    }
})

<div id="app">

    <!-- 动态表单实现 -->
    <div class="dynamic-form">

        <div class="form-item" v-for="formItem in dynamicForm" :key="formItem.field">

            <!-- 文本框 -->
            <template v-if="formItem.type == 'text'">
                <div class="form-item__label">
                    {{ formItem.title }}: 
                </div>
                <div class="form-item__control">
                    <input type="text" v-model="formItem.value" :placeholder="formItem.tips" />
                </div>
            </template>


            <!-- 单选框 -->
            <template v-else-if="formItem.type == 'radio'">
                <div class="form-item__label">
                    {{ formItem.title }}: 
                </div>
                <div class="form-item__control">

                    <div v-for="opt in formItem.options" :key="opt.value">
                        <input type="radio"
                            v-model="formItem.value"
                            :value="opt.value">
                        <label>{{ opt.text }}</label>
                    </div>

                </div>
            </template>


            <!-- 日期框 -->
            <template v-else-if="formItem.type == 'date'">
                <div class="form-item__label">
                    {{ formItem.title }}: 
                </div>
                <div class="form-item__control">
                    <input type="date" v-model="formItem.value" :placeholder="formItem.tips" />
                </div>
            </template>
            
        </div>

    </div>

    <button type="button" @click="submit">提交</button>

</div>