前端应用_Vue_ 介绍三种方法删除商品列表里记录

最新推荐文章于 2024-05-13 01:49:18 发布

上海_彭彭

最新推荐文章于 2024-05-13 01:49:18 发布

阅读量1.2k

点赞数

分类专栏： Vue.js 文章标签： Vue 删除方法

本文链接：https://blog.csdn.net/qq_34979346/article/details/98873934

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

上一节我们只是能添加记录，那如何删除呢，一共有两个方法

一个是利用数组的 some() 方法，一个是 findIndex 方法。

总结下思路，然后写代码，

第一先确认，删除记录的id
第二在删除记录的 button，绑定一个删除的方法，并把id 当作参数进去。
第三写删除方法，删除方法首先根据传入的id 找到数组对象的 index
第四找到index之后调用 splice 方法删除记录，然后返回true。

按照这个步骤一步步的来，不要急。

第一和第二如下

<td style="color: #0e9aef"><a href="#" @click.prevent="del(item.id)">删除</a></td>

要注意我们一定要时殷弘 prevent 阻断他的默认行为，否则这个click 事件是不能用的。我们把 id 当作参数。

第三和第四步骤如下：

 del(id){
                        this.list.some((item,index)=>{ if(item.id == id){
                            this.list.splice(index,1);
                            return true;

第二种方法用filter ， filter 的意思是符合的返回，不符合的不返回。
实际我们也可以用filter 进行写这个方法更简单点，如下：

 del(id){
                        this.list=this.list.filter((item,index)=>{ if(item.id != id){
                            return true;
                        } 
                       )
                    }
                }

第三种的写法，用findIndex 直接返回一个index 值，然后调用 splice 方法。

写法如下：

   del(id){
                        var index=this.list.findIndex((item)=>{ if(item.id == id){
                            return true;
                     
                        }
                        }
                       
                        )
                        this.list.splice(index,1)
                      
                    }

也能达到效果，

全部的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">


    </script>
</head>
<body>
<div id="pp" >
    
    <div class="panel panel-primary">
        <div class="panel-heading">
        <h3 class="panel-title">添加宠物</h3>
            </div>
        <div class="panel-body form-inline">
              <label>id:</label>
        <input type="text" v-model="id"  class="form-control">
         <label>name:</label>
        <input type="text" v-model="name" class="form-control">
        <input type="button" value="添加" @click="add" class="btn btn-primary">

        </div>

    </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tr  v-for="item,index in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td style="color: #0e9aef"><a href="" @click.prevent="del(item.id)">删除</a></td>
            </tr>
        </table>


</div>
<div>

    <script>
          var vue=new  Vue(
            {
                el: '#pp',
                data: {
                    id:'',
                    name:'',

                   list:[{id:1,name:"小狗",ctime:new Date()},{id:2,name:"小猫",ctime:new Date()},{id:3,name:"金鱼",ctime:new Date()},{id:4,name:"大闸蟹",ctime:new Date()}]

                },
                methods: {
                    add: function () {
                        this.list.push({id:this.id,ctime:new Date(),name: this.name})
                        this.name=this.id=''
                    },
                    del(id){
                        var index=this.list.findIndex((item)=>{ if(item.id == id){
                            return true;
                     
                        }
                        }
                       
                        )
                        this.list.splice(index,1)
                      
                    }

                }
            }
        )
    </script>
</div>
</body>
</html>

上海_彭彭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_ 介绍三种方法删除商品列表里记录

上一节我们只是能添加记录，那如何删除呢，一共有两个方法一个是利用数组的 some() 方法，一个是 findIndex 方法。总结下思路，然后写代码，第一先确认，删除记录的id第二在删除记录的 button，绑定一个删除的方法，并把id 当作参数进去。第三写删除方法，删除方法首先根据传入的id 找到数组对象的 index第四找到index之后调...
复制链接

扫一扫