Vue之 根据下switch开关不同动态显示不同的表单数据 且表单数据v-for显示

可以使用v-if指令根据switch开关的值来动态显示不同的表单数据，同时使用v-for指令来循环显示表单数据。

例如：

<template>
  <div>
    <div>
      <label>选择表单类型：</label>
      <select v-model="formType">
        <option value="text">文本</option>
        <option value="textarea">多行文本</option>
        <option value="select">下拉框</option>
      </select>
    </div>
    <div>
      <label>是否显示表单：</label>
      <input type="checkbox" v-model="showForm">
    </div>
    <div v-if="showForm">
      <div v-if="formType === 'text'">
        <label>文本：</label>
        <input type="text" v-model="formData.text">
      </div>
      <div v-if="formType === 'textarea'">
        <label>多行文本：</label>
        <textarea v-model="formData.textarea"></textarea>
      </div>
      <div v-if="formType === 'select'">
        <label>下拉框：</label>
        <select v-model="formData.select">
          <option v-for="option in selectOptions" :value="option.value">{{option.label}}</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formType: 'text',
      showForm: false,
      formData: {
        text: '',
        textarea: '',
        select: ''
      },
      selectOptions: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    }
  }
}
</script>

在上面的例子中，根据switch开关的值showForm来判断是否显示表单，根据select选择框的值formType来判断显示哪种表单。同时，使用v-for指令循环显示下拉框的选项