前端动态同时增加文本框，单选框，下拉框（数组）

本文链接：https://blog.youkuaiyun.com/zero881/article/details/113994088

本文详细介绍了如何在Vue.js环境中实现前端动态表单的创建，包括文本框、单选框和下拉框的增删功能。通过实例代码展示了如何绑定数据、监听事件以及实现删除功能，对于前端开发者掌握动态表单操作具有实践指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端动态同时增加文本框，单选框，下拉框（数组）

	    <form action="" class="ready-form">

					<div v-for='(list,index) in lists' v-bind:key='index' class="manDiv">
						<input  v-if="index !== 0" id="btnSubmit5" style=" float: right;margin: 0 100px;" class="btn btn-primary" type="button" @click="del(index)" value="删除"/>
						<div class="pl-form-c" style="width: 100%">
							<label class="pl-form-lable"><span class="star-span">*</span>
								爱好：</label>
							<input type="radio" style="margin: 0px 5px 0px;" v-validate="'required'" :name="['slow_patient_population'+index]" value="游泳" v-model="list.slow_patient_population">游泳
							<input type="radio" style="margin: 0px 5px 0px;" v-validate="'required'" :name="['slow_patient_population'+index]" value="跑步" v-model="list.slow_patient_population">跑步
							<input type="radio" style="margin: 0px 5px 0px;" v-validate="'required'" :name="['slow_patient_population'+index]" value="跳高" v-model="list.slow_patient_population">跳高
							<input type="radio" style="margin: 0px 5px 0px;" v-validate="'required'" :name="['slow_patient_population'+index]" value="读书" v-model="list.slow_patient_population">读书
						</div>
						<div class="pl-form-c" >
							<label class="pl-form-lable"><span class="star-span"></span>
								药品</label>
							<input path="realName"  htmlEscape="false" :id="'hypertension_drug_name'+index" class="input-medium" v-model="list.hypertension_drug_name" />
						</div>
						<div class="pl-form-c">
							<label class="pl-form-lable"><span class="star-span"></span>
								药品使用频次</label> <select  v-model="list.recent_drug_use_frequency">
							<option v-for="option in options61" v-bind:value="option.value">{{option.value}}</option></select>
							</div>
						<div class="pl-form-c">
							<label class="pl-form-lable"><span class="star-span"></span>
								每次使用药品剂量</label>
							<input path="realName"
								   v-model="list.drug_dosage" :placeholder="'请输入每次使用药品剂量'" htmlEscape="false" class="input-medium" />
						</div>
					</div>
					</form>

vue

var vm = new Vue({
		  el: '#id',
		  // 这里是你要往里面添加的div 的 id
		  data: {
		  options61: [{key: '01', value: '1次'}, {key: '02', value: '2次'},{key: '03', value: '3次'}],
		  // 数组初始化
		  lists: [
				  { slow_patient_population:'',
					  hypertension_drug_name:'',
					  recent_drug_use_frequency:'',
					  drug_dosage:''
				  }
			    ]
          },
          methods:{
		  	// 增加
			 addEl: function () {
				 var cope = {
					 slow_patient_population : "",
					 hypertension_drug_name :"",
					 recent_drug_use_frequency :"",
					 drug_dosage :""
				 }
				 this.lists.push(cope);
			 },
		     // 删除
			 del: function(index) {
				 this.lists.splice(index, 1);
			 }
		}