使用Vue动态生成form表单的实例代码

使用Vue动态生成form表单，可以根据数据动态生成表单项，非常方便，下面提供一份完整的攻略。

步骤一：创建Vue实例

首先，我们需要在html页面中引入Vue.js，然后创建一个Vue实例并挂载到指定的DOM节点上。

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      formFields: []
    },
    methods: {
      addFormField: function() {
        this.formFields.push({});
      }
    }
  });
</script>

步骤二：使用v-for动态渲染表单项

接下来，使用v-for指令动态渲染表单项。

<form>
  <div v-for="(field, index) in formFields" :key="index">
    <label>Field {{index+1}}:</label>
    <input type="text" v-model="field.name">
  </div>
</form>

<button v-on:click="addFormField()">Add Field</button>

在上面的代码中，我们使用了一个addFormField()方法，用于在formFields数组中添加一个空对象。在v-for指令中，我们使用了formFields数组进行遍历，并使用:key="index"用于提高Vue渲染性能。

示例一：动态生成文本框

下面我们来看一个例子，动态生成文本框。

<form>
  <div v-for="(field, index) in formFields" :key="index">
    <label v-if="field.label">{{field.label}}:</label>
    <input v-if="field.type == 'text'" type="text" v-model="field.value">
    <textarea v-if="field.type == 'textarea'" v-model="field.value"></textarea>
    <select v-if="field.type == 'select'" v-model="field.value">
      <option v-for="option in field.options" :value="option.value">{{option.label}}</option>
    </select>
  </div>
</form>

<button v-on:click="addFormField({type: 'text', label: 'Field', value: ''})">Add Text Field</button>
<button v-on:click="addFormField({type: 'textarea', label: 'Field', value: ''})">Add Textarea Field</button>
<button v-on:click="addFormField({type: 'select', label: 'Field', value: '', options: [{label: '', value: ''}]})">Add Select Field</button>

在代码中，我们使用了v-if条件渲染指令，在type属性中判断当前表单项的类型，按照类型渲染对应的表单控件。

按钮使用了同样的addFormField()方法，但是在调用方法时，会传入不同的options参数，用于区别不同的表单项类型。

示例二：动态生成复选框

下面我们再来看一个例子，动态生成复选框。

<form>
  <div v-for="(field, index) in formFields" :key="index">
    <label>{{field.label}}</label>
    <div v-for="(option, optionIndex) in field.options" :key="optionIndex">
      <input type="checkbox" 
             :id="'checkbox_'+index+'_'+optionIndex" 
             :value="option.value" 
             v-model="field.value"
             >
      <label :for="'checkbox_'+index+'_'+optionIndex">{{option.label}}</label>
    </div>
  </div>
</form>

<button v-on:click="addFormField({
                        type: 'checkbox', 
                        label: 'Field', 
                        options: [{label: 'Option 1', value: 'option_1'}, 
                                  {label: 'Option 2', value: 'option_2'}]
                        })">
  Add Checkbox Field
</button>

在示例代码中，我们首先添加了一个checkbox类型的表单项，其次使用v-for遍历options数组，渲染复选框和选项名称。使用v-model绑定数据，将选中的选项值存储在field.value中。

以上就是使用Vue动态生成form表单的完整攻略，包含了两个示例。