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

这篇具有很好参考价值的文章主要介绍了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>

三、效果展示

这是初始页面

element 动态添加input,vue.js,ui,elementui

这是点击添加

element 动态添加input,vue.js,ui,elementui

这是删除的

element 动态添加input,vue.js,ui,elementui

四、详细说明

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框，还可以是很多结构，希望本文对你有用，没办法，语文是数学老师教的，表达能力有限，不懂的可以私信我，看到必回！文章来源地址https://www.toymoban.com/news/detail-518398.html

到了这里，关于vue结合element-ui实现（按钮控制）动态增加减少input框功能。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！