专栏首页Devops专栏17. Vue 常用列表操作实例 - 删除列表数据

17. Vue 常用列表操作实例 - 删除列表数据

需求

上一篇章介绍了列表操作中的数据新增的功能,本篇章来看看删除数据的功能。

思路

如果要删除列表中的数据,那么该如何删除呢?

  1. 删除数据需要基于数据的id号,需要将数据的id传递到删除方法中
  2. 根据id,找到要删除这一项的数组索引 index
  3. 如果找到索引index了,直接调用 数组的 splice(index,1) 方法删除数据

实例代码

在编写删除方法前,先提供示例的代码,方便读者阅读,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
    <!--  2.导入bootstrap库  -->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
    <script type="text/javascript" src="lib/bootstrap4/popper.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap4/bootstrap.min.js"></script>
</head>
<body>

    <div id="app">

        <div class="container">

            <!-- 搜素条件 start -->
            <div class="row mt-2">
                <!-- 输入添加数据的id -->
                <div class="form-group row">
                    <label for="input_id" class="col-sm-2 col-form-label">ID</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input_id" placeholder="ID" v-model="id">
                    </div>
                </div>

                <!-- 输入添加数据的name -->
                <div class="form-group row ml-3">
                    <label for="input_name" class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input_name" placeholder="Name" v-model="name">
                    </div>
                </div>

                <!-- 添加按钮  -->
                <input type="button" value="添加" class="btn btn-primary ml-2 mb-3" @click="add">

                <!-- 搜素关键字 -->
                <input type="text" class="form-control" id="input_keywords" placeholder="输入关键字">

            </div>
            <!-- 搜素条件 end -->

            <!-- table列表 start-->
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">Name</th>
                            <th scope="col">Ctime</th>
                            <th scope="col">Operation</th>
                        </tr>
                    </thead>
                    <tbody>

                        <!-- 使用v-for遍历数据,并且设置key保证组件唯一性  -->
                        <tr v-for="item in list" :key="item.id">
                            <th scope="row">{{ item.id }}</th>
                            <td>{{ item.name }}</td>
                            <td>{{ item.ctime }}</td>
                            <td><a href="#">删除</a></td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <!-- table列表 end-->

        </div>

    </div>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                // 设置列表的数据 list
                list: [
                    { id: 1, name: '奔驰', ctime: new Date() },
                    { id: 2, name: '宝马', ctime: new Date() },
                    { id: 3, name: '丰田', ctime: new Date() },
                ],
            },
            methods:{
                add(){
                    // 将数据加入list数组
                    this.list.push({ id: this.id, name: this.name, ctime: new Date() });
                }
            }
        })
    </script>

</body>
</html>

实现删除的方法

1. 删除数据需要基于数据的id号,需要将数据的id传递到删除方法中

2. 根据id,找到要删除这一项的数组索引 index

在这里已经有了数组list中的id号,那么根据这个id号就可以查询到该数组在数组中的索引index。

那么基于ES6,提供了几个新方法便于数组可以根据值来定义索引,例如:some findIndex。下面来先一个简单的完成示例。

2.1 使用some方法遍历数组,当return true则终止循环

在浏览器中点击删除按钮,查看打印的数组索引,如下:

那么再来看看findIndex方法来定位数组的索引。

2.2 使用findIndex方法定位数组的索引

在浏览器中点击删除按钮,查看打印的数组索引,如下:

可以看出findIndex方法直接就将终止位置的索引index返回。

3. 使用索引index直接调用 数组的 splice(index,1) 方法删除数

根据上面找到的索引index来删除数据,如下:

浏览器执行删除如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 16. Vue 常用列表操作实例 - 增加列表数据

    在前端开发中,对于列表的操作是最常见的,例如:增加列表数据、删除列表数据、查询列表的关键字等等。

    Devops海洋的渔夫
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • jquery 元素节点操作 - 创建节点、插入节点、删除节点

    前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

    Devops海洋的渔夫
  • 静态网站

    用户7054460
  • electron制作聊天界面(仿制qq)

    这里解释一下为什么有一个paddingRight 因为我们的滚动条是5px 如果不加 在滚动条显示的时候页面会抖动

    李昊天
  • 如何编写轻量级 CSS 框架

    Github: https://github.com/nzbin/snack Docs:  https://nzbin.github.io/snack 前言...

    叙帝利
  • 3种纯CSS方式实现Tab 切换

    Tab 切换是种很常见的网页呈现形式,不管是PC或者H5都会经常看到,今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式,同时对比一下那种代码更方便,更通...

    Javanx
  • 20篇顶级深度学习论文(附链接)

    本文讲述了深度学习正值快速发展进化阶段,新技术,新工具以及新的应用实现正在深刻改变着机器学习领域并不断获得累累硕果。

    数据派THU
  • django实战(四)--修改数据

    点击编辑按钮,假设我们点击id为8 的,浏览器地址变为http://127.0.0.1:8000/curd/edit/?eid=8

    绝命生
  • 【DUBBO】 Schema解析Spring扩展机制集成Spring

    dubbo是如何做到与spring集成的?这都依赖于Spring提供的XML Schema可扩展机制,用户可以自定义XML Schema文件,并自定义XML B...

    spilledyear

扫码关注云+社区

领取腾讯云代金券