如何在HTML Vue.js中根据选择框选项动态添加对应行？

嘿，这个需求在Vue里实现起来挺简单的，核心就是利用Vue的响应式数据来动态渲染内容。我给你两种实用的方案，你可以根据自己的场景选：

方案一：直接用条件渲染（适合内容差异大的场景） #

这种方式最直观，针对每个选项写对应的行，用v-if来控制显示隐藏：

HTML代码 #

<!-- 你原有的下拉框代码 -->
<div class="row">
  <div class="col-md-4">
    <div class="form-group label-floating">
      <label class="control-label">Case Type</label>
      <select class="form-control" v-model="Type" id="type">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
</div>

<!-- 动态渲染的对应行 -->
<div class="row" v-if="Type === '1'">
  <div class="col-md-12">
    <div class="form-group label-floating">
      <label class="control-label">One专属输入框</label>
      <input type="text" class="form-control" v-model="oneInput">
    </div>
  </div>
</div>

<div class="row" v-if="Type === '2'">
  <div class="col-md-12">
    <div class="form-group label-floating">
      <label class="control-label">Two专属选择器</label>
      <select class="form-control" v-model="twoSelect">
        <option value="a">选项A</option>
        <option value="b">选项B</option>
      </select>
    </div>
  </div>
</div>

<div class="row" v-if="Type === '3'">
  <div class="col-md-12">
    <div class="form-group label-floating">
      <label class="control-label">Three专属文本域</label>
      <textarea class="form-control" v-model="threeTextarea"></textarea>
    </div>
  </div>
</div>

Vue实例代码 #

new Vue({
  el: '#app', // 记得把这个绑定到你的根容器ID上
  data() {
    return {
      Type: '1', // 默认选中第一个选项
      oneInput: '',
      twoSelect: 'a',
      threeTextarea: ''
    }
  }
})

适用场景：如果每个选项对应的行内容结构差异很大（比如有的是输入框，有的是选择器），这种方式写起来清晰，维护方便。

方案二：用配置数组渲染（适合选项较多的场景） #

如果以后可能要加更多选项，或者每个行的结构类似，用配置数组的方式更灵活，不用重复写多个v-if：

Vue实例代码 #

new Vue({
  el: '#app',
  data() {
    return {
      Type: '1',
      // 配置每个选项对应的行内容和绑定字段
      rowConfigs: [
        {
          value: '1',
          label: 'One专属输入框',
          type: 'input',
          bindKey: 'oneInput'
        },
        {
          value: '2',
          label: 'Two专属选择器',
          type: 'select',
          bindKey: 'twoSelect',
          options: [{value: 'a', text: '选项A'}, {value: 'b', text: '选项B'}]
        },
        {
          value: '3',
          label: 'Three专属文本域',
          type: 'textarea',
          bindKey: 'threeTextarea'
        }
      ],
      // 存储各个字段的值
      formData: {
        oneInput: '',
        twoSelect: 'a',
        threeTextarea: ''
      }
    }
  },
  computed: {
    // 计算当前选中的配置
    currentRowConfig() {
      return this.rowConfigs.find(item => item.value === this.Type)
    }
  }
})

HTML代码 #

<!-- 原有的下拉框 -->
<div class="row">
  <div class="col-md-4">
    <div class="form-group label-floating">
      <label class="control-label">Case Type</label>
      <select class="form-control" v-model="Type" id="type">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
</div>

<!-- 根据配置动态渲染行 -->
<div class="row" v-if="currentRowConfig">
  <div class="col-md-12">
    <div class="form-group label-floating">
      <label class="control-label">{{ currentRowConfig.label }}</label>
      
      <!-- 渲染输入框 -->
      <input 
        v-if="currentRowConfig.type === 'input'"
        type="text" 
        class="form-control" 
        v-model="formData[currentRowConfig.bindKey]"
      >
      
      <!-- 渲染选择器 -->
      <select 
        v-else-if="currentRowConfig.type === 'select'"
        class="form-control" 
        v-model="formData[currentRowConfig.bindKey]"
      >
        <option 
          v-for="opt in currentRowConfig.options" 
          :key="opt.value" 
          :value="opt.value"
        >
          {{ opt.text }}
        </option>
      </select>
      
      <!-- 渲染文本域 -->
      <textarea 
        v-else-if="currentRowConfig.type === 'textarea'"
        class="form-control" 
        v-model="formData[currentRowConfig.bindKey]"
      ></textarea>
    </div>
  </div>
</div>

适用场景：选项数量多，或者后续可能新增选项，只需要在rowConfigs里加配置即可，不用修改HTML结构，扩展性更强。

几个注意点 #

• 注意v-model绑定的Type是字符串类型（因为option的value是"1"这种字符串），所以判断的时候一定要用字符串比较（比如Type === '1'），避免类型不匹配导致的渲染问题。
• 如果行内容特别复杂，建议把每个行封装成独立的Vue组件，然后根据Type动态引入对应的组件，代码会更模块化。
• 确保所有表单元素的v-model都绑定到Vue实例的data属性上，这样才能保持数据的响应式更新。

内容的提问来源于stack exchange，提问作者Wanderer