Vue.js 动态表单：根据下拉框选择显示不同数据

本文将介绍如何在 Vue.js 中实现根据下拉框选项的不同，动态显示不同的表单数据，并且使用 v-for 指令来迭代显示表单数据。

实现步骤

1. **定义数据**

   在 Vue 组件中，定义一个下拉框选项的数据和多个表单数据数组，例如：</li>
   

     
   data() {
     return {
       selectedOption: '',
       formData1: [
         { label: '姓名', value: '' },
         { label: '年龄', value: '' },
         { label: '性别', value: '' }
       ],
       formData2: [
         { label: '地址', value: '' },
         { label: '电话', value: '' },
         { label: '邮箱', value: '' }
       ]
     }
   }
     
   

2. **使用下拉框组件**

   在模板中使用下拉框组件，并绑定选项值和选项变化事件，例如：</li>
   

3. **实现选项变化事件**

   在组件方法中实现选项变化事件，根据选项值的不同来动态显示对应的表单数据，例如：</li>
   

     
   methods: {
     onOptionChange() {
       if (this.selectedOption === '1') {
         this.formData1.forEach(item => item.value = '');
       } else if (this.selectedOption === '2') {
         this.formData2.forEach(item => item.value = '');
       }
     }
   }
     
   

4. **添加验证逻辑**

   根据需要为表单数据添加验证逻辑，并在提交表单时进行验证和处理。</li>
   

通过以上步骤，您就可以实现根据下拉框选项的不同动态显示不同的表单数据，并使用 v-for 指令迭代显示多个数据项。这将使您的 Vue.js 应用更具动态性和交互性。