一、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框,还可以是很多结构,希望本文对你有用,没办法,语文是数学老师教的,表达能力有限,不懂的可以私信我,看到必回!
版权归原作者 Single-Thread 所有, 如有侵权,请联系我们删除。