【Vue案例】实现对表单数据的添加、删除以及关键字查询操作

程序员文章站 2022-05-15 13:39:32

...

本文我们通过一个小案例来巩固一下前面学到的内容，即实现对表单数据的添加，删除和关键字查询的操作，具体案例效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 导入Vue包 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <!-- 引入bootstrap工具库，快速实现页面布局 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <!-- 在bootstrap工具库中直接使用布局样式 -->
        <h3 class="alert alert-primary" role="alert">热销水果</h3>
        <div class="form-inline mx-sm-3" style="font-Size: 20px;">
            <!-- 通过v-model指令将id和name输入框的信息和vm中的id和name绑定 -->
            ID: <input type="text" class="form-control" v-model='id'>
            Name: <input type="text" class="form-control" v-model='name'>
            <!-- 给"添加按钮"绑定点击事件 -->
            <button class="btn btn-primary mx-sm-3" @click='add'>添加</button>
            <!-- 通过v-model指令将keywords搜索框的信息和vm中的keywords绑定 -->
            搜索名称关键字: <input type="text" class="form-control" v-model='keywords'>
        </div><br>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Time</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- v-for循环中添加search方法，调用方法返回的信息 -->
                <tr v-for='item in search(keywords)' :key='item.id'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <!-- 给"删除链接"绑定点击事件，注意要使用.prevent修饰符阻止a标签的默认行为 -->
                    <td><a href="" @click.prevent='del(item.id)'>删除</a></td>
                </tr>
            </tbody>
          </table>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'苹果',time:new Date()},
                    {id:2,name:'橘子',time:new Date()},
                    {id:3,name:'香蕉',time:new Date()}
                ]
            },
            methods:{
                add(){
                    // 添加的数据记录到list中
                    this.list.push({id:this.id,name:this.name,time:new Date()})
                    //将输入框置空
                    this.id=this.name=''
                },
                // 删除记录的实现逻辑：点击删除链接，获取要删除记录的id，然后调用数组的splice方法来移除记录
                del(id){
                    // 通过数组的some方法来循环判断
                    this.list.some((item,i)=>{
                        if(item.id==id){
                            this.list.splice(i,1);
                            // 返回true，终止循环
                            return true;
                        }
                    })
                    // 也可以通过findIndex方法来获取要删除数据的索引
                    // var index = this.list.findIndex(item=>{
                    //     if(item.id==id){
                    //         return true
                    //     }
                    // })
                    // //通过splice方法来移除记录
                    // this.list.splice(index,1)
                },
                search(keywords){
                    // 保存新的数组
                    var newList = []
                    this.list.forEach(item => {
                        // 判断循环的记录中是否包含查询的关键字
                        if(item.name.indexOf(keywords) != -1){
                            // 将循环的记录添加到新的数组中
                            newList.push(item)
                        }
                    })
                    // 返回数组信息
                    return newList
                    // 也可以通过filter方法返回满足条件的数组
                    // return this.list.filter(item=>{
                    //     if(item.name.includes(keywords)){
                    //         return item
                    //     }
                    // })
                }
            }
        })

    </script>
</body>
</html>

数组常用的循环方法比较：

循环方法	说明
forEach	不可终止循环
some	返回true终止循环
findIndex	返回true可以终止循环，返回满足条件的索引
filter	过滤数组，返回过滤后的数组