vue添加，删除，搜索功能

Posted 2022-05-31 wuyunna

    <!--new 的 vue 实例会控制这个元素中的所有内容,也是MVVM中的 V -->
        <div id="app">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加效果</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>Id: <input type="text" class="form-control" v-model="id"/></label>
                    <label>Name: <input type="text" class="form-control" v-model="name"/></label>
                    <input type="button" value="添加" class="btn btn-primary" @click="add"/>
                    <label>搜索关键字: <input type="text" class="form-control" v-model="keywords"/></label>
                </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>
                <tbody>
                <!--自定义 search 方法，把关键字通过传参的形式，传递给 search方法,在 search 方法内部，通过 执行 for循环，把所有符合 搜索关键字的数据，保存到一个新数据中，返回 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td> item.id </td>
                    <td> item.name </td>
                    <td> item.ctime </td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

　　

   <script>
　　　　　　　//创建一个vue的实例,也是MVVM中的 VM调度者,里面可传配置对象
            var vm = new Vue(
                el:"#app",
                //data指MVVM中的 M ,用来存 el 中用的数据
                data:
                    id:"",
                    name:"",
                    keywords:"",
                    list:[
                        id:1, name:‘名字1‘, ctime:new Date(),
                        id:2, name:‘名字2‘, ctime:new Date()
                    ]
                ,
                methods:
                    add:function()
                        var abc = id:this.id, name:this.name, ctime:new Date()
                        this.list.push(abc);
                        this.id = this.name = ""
                    ,
        //        删除事件逻辑：
        //          1.删除的时候一般是根据 id 来进行删除的
        //          2.给个点击事件，取消默认事件，因为要通过id来删，所以将id传个参    @click.prevent="del(item.id)"
        //          3.定义 del 的方法（函数，点击事件）
        //          4.函数中 传参id，根据id删除数据
        //          5.分析：
        //              i:根据id，找到当前的索引
        //              ii:找到索引了，根据 数组的 splice 方法进行删除
        //          6.注意： forEach  some  filter  findIndex     这些都属于数组的新方法
        //              forEach : 没有办法终止
        //              some : 通过 return:true 可以终止
        //              filter : 过滤，符合条件的
        //              findIndex : 找到数组对应的索引,专门查找索引
        //          7.之所以用到some ，是因为找到要删除的 id后，就终止了循环
        //              some和findIndex的区别：some方法中可以做任何事情，但是findIndex是专门用来查索引的
                    del:function(id)
        //              一种写法：
        //              this.list.some((item,i)=>
        //                 if(item.id == id)
        //                   .splice(2,3) 从索引为 i(或者2) 开始，删除 1(或者3) 个
        //                   this.list.splice(i,1)
        //                   终止循环
        //                   return true;
        //                 
        //              );
        //              另一种写法：
                        var index = this.list.findIndex(item =>
                            if(item.id == id)
                                return true;
                            
                        );
                        this.list.splice(index,1)
                     ,

                    search:function(keywords)
                        var newList = []
                        this.list.forEach(item=>
                          if(item.name.indexOf(keywords) != -1)
                            newList.push(item)
                        　
                        )
                    　　 return newList;


            //          return this.list.filter(item =>
            //            if(item.name.indexOf(keywords) != -1)
            //              ES6中，为字符串提供了一个新的方法，String.prototype.includes(‘要包含的字符串‘),如果包含，则返回 true ，否则返回 false
            //              if(item.name.includes(keywords))
            //                 return  item
            //              
            //           )
            　　　　　　
            　　　　
             )
        </script>