vue 实现动态增加输入框_vue 动态添加input输入框

vue 动态添加input输入框

实现需求:请求到后台数据是String以","隔开的,要求要以input框的方式来增删改,最后以String的数据格式提交给后台

data() {

return {

str: "aaaa,bbbbb,ccccc",

mylist: []

};

},

mounted() {

this.mylist = this.str.split(",").map(function(item) {

return {

val: item

};

});

},

因为input的v-model不能为item,所以给他的值加上一个属性名

.map():对数组的每个元素都遍历一次,同时返回一个新的值

add() {

this.mylist.push({ val: "" });

},

remove(myindex) {

this.mylist = this.mylist.filter(

(currentValue, index) => index != myindex

);

}

添加和删除数组

filter() - 用于把Array的某些元素过滤掉,然后返回剩下的元素。filter()接收一个函数把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素.

语法:array.filter(function(currentValue,index,arr), thisValue)

参数解释:

currentValue:必须。当前元素的值

index:可选。当前元素的索引值

arr:可选。当前元素属于的数组对象

filter()的本质就是筛选,留下符合条件的,过滤掉不符合条件的,判断条件是点击的index不等于数组里面的index,若等于就过滤掉这个项

save() {

var result = this.mylist.map(item => item.val);

result = result

.filter(function(item) {

return item;

})

.join(",");

},

这里的filter()的目的是剔除为空的数组,然后再转字符串


版权声明:本文为weixin_42314860原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。