vue结合element-ui实现（按钮控制）动态增加减少input框功能。

一、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框，还可以是很多结构，希望本文对你有用，没办法，语文是数学老师教的，表达能力有限，不懂的可以私信我，看到必回！