vue elementui点击按钮新增输入框(点多少次就新增多少个输入框,无限新增)
2023-12-13 05:42:46
效果如图:
核心代码:
<div v-for="(item,index) in arrayData" :key="item.id">
//上面这个是关键代码,所有思路靠这个打通
<el-input
type="input" //除了输入框,还有textarea等
placeholder="请填写测试需求"
v-model="item.data" //这里是要再input中显示的值
>
</el-input>
<el-button type="danger" @click="delete(item,index)">-</el-button>
</div>
<el-button type="primary" @click="add">+</el-button>
data(){
return {
arrayData:[
{
id:"",
data:""
}
],
dataNum:0
}
}
methods:{
delete(item,index){
if(this.arrayData.length<=1){//如果只有一个输入框则不可以删除
return false
}
this.arrayData.splice(index,1)//删除了数组中对应的数据也就将这个位置的输入框删除
},
add(item){
this.arrayData.push(//增加就push进数组一个新值
{
id:this.dataNum++,
data:''
}
)
},
}
文章来源:https://blog.csdn.net/everMrzhong/article/details/134940962
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!