一、template部分
<template>
<div>
<el-button type="primary" @click="add">添加</el-button>
<el-form ref="form" :model="form" label-width="80px">
<!-- 这个的v-for是核心是重点，一定要明白！ -->
<div v-for="(item,index) in array" :key="index">
<el-form-item>
<el-input style="width:20%;margin-right:10px" v-model="form.value[index]" placeholder="你好！程序员！"></el-input>
<el-button type="danger" size="small" icon="el-icon-delete" circle @click="del(index)"></el-button>
</el-form-item>
</div>
</el-form>
</div>
</template>二、script部分
<script>
export default {
name:'App',
data(){
return {
array:[1], //创建一个数组
form:{
value:[] //接收每个input框的值
}
}
},
methods:{
// 添加按钮
add(){
this.array.push(1) //通过添加array的值，增加input的个数
},
del(index){
this.form.value.splice(index,1) //先删除form中value对应索引的值
this.array.splice(index,1) //然后删除array对应索引的值，实现点击删除按钮，减少input框效果
}
}
}
</script>
<style>
</style>三、效果展示
这是初始页面
这是点击添加
这是删除的
四、详细说明
v-for="（item,index）in array" :key = "index"这个是重点！！！！
通俗点将，就是用一个div（盒子）将input输入框包括起来，然后在div中使用
v-for="（item,index）in array" :key = "index"；大致思路：这个input的个数取决于array这个数组的长度，点击增加按钮，增加array数组的数值，也就是增加array数组的一个元素（长度），array增加了个数，div就会增加一个，因为div在这个数组中，删除就是删除array的一个元素，array的长度就会减小1，所以div的个数也会跟着减少一个，为什么使用splice进行删除，因为点击删除按钮，传递的index参数是当前点击的div在array数组中的索引值，所以这样点击不会出现删错数据的bug,基本就是这个意思，还不明白的话就去看vue官方文档，列表渲染这节，看懂了，大体上就懂了。
当然了，不只是input框，还可以是很多结构，希望本文对你有用，没办法，语文是数学老师教的，表达能力有限，不懂的可以私信我，看到必回！
扫描二维码关注公众号，回复：
15669737 查看本文章
