Vue之 根据下拉框选项选择的不同动态显示不同的表单数据 且表单数据v-for显示

可以通过监听下拉框选项的变化来动态显示不同的表单数据，并在表单数据的展示中使用v-for指令来迭代显示多个数据项。

具体实现步骤如下：

1. 在Vue组件中定义一个下拉框选项的数据，以及多个表单数据数组，如下所示：

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

2. 在模板中使用下拉框组件，并绑定选项值和选项变化事件，如下所示：

<template>
  <div>
    <select v-model="selectedOption" @change="onOptionChange">
      <option value="">请选择</option>
      <option value="1">表单数据1</option>
      <option value="2">表单数据2</option>
    </select>
    <div v-if="selectedOption === '1'">
      <div v-for="item in formData1" :key="item.label">
        <label>{{ item.label }}</label>
        <input type="text" v-model="item.value">
      </div>
    </div>
    <div v-if="selectedOption === '2'">
      <div v-for="item in formData2" :key="item.label">
        <label>{{ item.label }}</label>
        <input type="text" v-model="item.value">
      </div>
    </div>
  </div>
</template>

3. 在组件方法中实现选项变化事件，根据选项值的不同来动态显示对应的表单数据，如下所示：

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

4. 最后，可以根据需要为表单数据添加验证逻辑，并在提交表单时进行验证和处理。

总体来说，动态显示不同的表单数据可以通过监听下拉框选项的变化实现，而表单数据的v-for显示则可以利用Vue的指令来实现