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()接收一个函数把传入的函数依次作用于每个元素