vue动态添加input输入框

Posted 2021-09-06 可乐そ

动态添加单个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>

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