本文介绍如何在Vue中动态创建和删除input输入框，以处理后台返回的以逗号分隔的字符串数据。通过在`data`中定义`str`和`mylist`，在`mounted`阶段将字符串转换为包含`val`的对象数组。使用`map()`方法遍历并创建input框。添加新输入框的方法是`add()`, 删除则是`remove()`，利用`filter()`方法筛选并移除指定索引的元素。最后，`save()`方法将处理后的数组转化为符合后台要求的字符串，过滤掉空值并用逗号连接。"
125938590,12922821,HTML5 Canvas 绘图指南：线条、矩形与曲线绘制,"['前端开发', 'HTML', 'JavaScript']
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()的目的是剔除为空的数组，然后再转字符串
扫一扫
3697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
