动态添加input输入框

Posted 柠檬20

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态添加input输入框相关的知识,希望对你有一定的参考价值。

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

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

以上是关于动态添加input输入框的主要内容,如果未能解决你的问题,请参考以下文章

vue动态添加input输入框

vue动态添加input输入框

HTML+jQuery实现动态添加<input>输入框

利用jQuery动态添加input输入框,并且获取他的值

如何通过Js实现点击一组复选框,动态添加1个input输入框,输入框中自动填充所选复选框的内容呢?

按钮动态添加删除input