动态添加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输入框的主要内容,如果未能解决你的问题,请参考以下文章