【前端页面】如何删除列表中的元素

最近接到一个编写评价页面的任务,在任务中,需要上传用户晒的图,当然也要有能删除用户上传的图的功能

我对元素是进行的push进的列表中,最开始我想的方法是对列表进行pop操作,但是这样我不能控制删除的元素,经过查询资料,我找到了方法,就此记录一下,免得下次在遇到类似的问题再去查资料(笑)

首先是找到元素本身,这里使用一个方法来查找
假设item是要删除的数组

1 // 这是uni-app的写法, 
2 findTarget:function(val){
3     for(let i = 0; i < item.length; i++){
4         if(item[i] == val) return i;    // 判断传入的数据是否和列表中的数据匹配
5     }
6         return -1;
7 }

  

接下来删除这个元素

1 deleteImg: function(val){
2     var index = this.findTarget(val);
3     if(index > -1){
4         this.item.splice(index,1);
5     }
6 }

这里主要是使用了splice方法对元素进行分割

这里顺便说说我自己对splice方法的理解

在w3c School中的定义是:splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 注释:该方法会改变原始数组。

splice可以对数组进行删除,也可以对数组进行添加新元素(目前我还没有使用到添加新元素的操作)
这里使用的splice()方法需要两个参数,第一个参数是目标位置,也就是你想要操作的位置;第二个参数是要删除的的数量。

如上面的代码中splice(index,1),意思就是删除index位置的1个元素

问题解决!

拒绝摸鱼划水,记录成长~

 

猜你喜欢

转载自www.cnblogs.com/shadyree/p/13366808.html
今日推荐