Vue 动态显示表单数据 - 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>
<p>本文展示了一个简单的 Vue.js 示例，说明如何使用 switch 开关 (showForm) 和 select 选择框 (formType) 动态控制表单的显示和内容。通过 v-if 指令根据条件显示不同的表单元素，并使用 v-for 指令循环渲染下拉框选项。</p>
<p><strong>关键点：</strong></p>
<ul>
<li>使用 v-model 指令双向绑定表单数据，方便数据更新和展示。</li>
<li>v-if 指令根据条件控制表单元素的显示与隐藏。</li>
<li>v-for 指令循环渲染下拉框选项。</li>
</ul>
<p>你可以根据实际需求修改代码，实现更加复杂和灵活的动态表单功能。</p>