用vue简单的实现商品的添加删除以及搜索

• 主要技术点：数组的几种的方法，以及利用过滤器完成搜索功能。

 主要代码如下：

html ：

    <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" @keyup.enter="add">
                    <!-- <input type="text" class="form-control" v-model="name" @keyup.F2="add"> -->
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
                <label>
                    搜索关键字:
                    <input type="search" class="form-control" v-model="keywords" v-focus>
                </label>
            </div>

        </div>

        <table class="table table-bordered table-hover tab table-striped">
            <thead>
                <tr>
                    <td>Id</td>
                    <td>Name</td>
                    <td>Ctime</td>
                    <td>Operation</td>
                </tr>
            </thead>
            <tbody>
               <tr v-for="item in search(keywords)" :key=item.id>
                   <td>{{item.id}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.ctime | dateFmate()}}</td>
                   <td>
                       <a href="" @click.prevent="del(item.id)">删除</a> 
                       <!-- 这时候要阻止默认行为，如果不阻止会刷新页面 -->
                   </td>
               </tr>
            </tbody>
        </table>
    
    </div>

 js：

    <script>

        //自定义全局按键修饰符
        //Vue.config.keyCodes.F2 = 113

        //定义一个使用Vue.directive() 定义全局的指令 获取焦点
        Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })

        //定义一个全局过滤器
        Vue.filter('dateFmate',function(dateStr,pattern=''){
            var dt = new Date(dateStr)

            var y = dt.getFullYear()
            var m = (dt.getMonth() + 1).toString().padStart(2, '0')//字符串补全长度的功能
            var d = dt.getDate().toString().padStart(2, '0')


             //return `${y}-${m}-${d}`
            if(pattern.toLowerCase() === 'yyyy-mm-dd'){
                return `${y}-${m}-${d}`
            }else{
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })


        var vm = new Vue({
            el:'#app',
            data:{
                id:"",
                name:"",
                keywords:'',
                list:[
                    {id:1,name:'奔驰',ctime: new Date()},
                    {id:2,name:'宝马',ctime: new Date()},
                    {id:3,name:'保时捷',ctime: new Date()}
                ]
            },
            methods:{
                //增加方法
                add(){
                    var obj = {id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(obj)
                    this.id=this.name=""   //表达式赋值为空，从右向左进行
                },
                //删除方法
                del(id){
                    //删除的两种方式


                    // this.list.some((item,i) => {
                    //     if(item.id == id){
                    //         this.list.splice(i,1)
                    //         // 在数组的some方法中，如果 return ture ，就会立即终止这个数组的后续循环
                    //         return true;
                    //     }
                    // })


                    var index = this.list.findIndex(item =>{
                        if(item.id == id){
                            return true;
                        }
                    })
                    //console.log(index);   findIndex是来查找索引的
                    
                    this.list.splice(index,1)
                },
                //自动搜索方法
                search(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){}
                        if(item.name.include(keywords)){
                            return item
                        }
                    })
                    */
                //    var newlist = this.list.filter(item => {
                //         //if(item.name.indexOf(keywords) != -1){}
                //         if(item.name.include(keywords)){
                //             return item
                //         }
                //     })
                //     return newlist;

                }
            }
        });




    </script>