vue动态添加input输入框

Posted 2022-01-28 可乐そ

动态添加单个input框

<template>
	<div v-for="(i, j) in list" :key="j">
	    <p>人员姓名：</p>
	    <p><input type="text" v-model="userName[j]" placeholder="请输入人员姓名"></p>
	</div>
	<button @click="AddPeople">添加人员</button>
</template>
<script>
export default 
  data()
    list:[''],
    userName:[]，
  ,
  methods: 
    AddPeople()
      this.list.push('')；
      console.log(userName，'---我是userName')
    ,
  

</script>

动态添加多个input框

<template>
<div v-for="(i, j) in list" :key="j">
	<div class="f jc-b">
	    <p>人员姓名：</p>
	    <p><input  type="text" v-model="userName[j]" placeholder="请输入人员姓名"></p>
	</div>
	<div class="f jc-b">
	    <p>联系电话：</p>
	    <p><input type="text" v-model="phone[j]" placeholder="请输入电话"></p>
	</div>
	<div class="f jc-b">
	    <p>身份证号：</p>
	    <p><input type="text" v-model="codeId[j]" placeholder="请输入身份证号"></p>
	</div>
</div>
<button @click="AddPeople">添加人员</button>
</template>
<script>
export default 
  data()
    list:[''],
    userName:[]，//姓名
    phone:[]，//电话
    codeId:[]，//身份证
  ,
  methods: 
    AddPeople()
      this.list.push('')；
    ,
  

</script>

总结：全文没有一句废话，额…除了这句。。。