vue实现添加，删除，搜索功能

<!--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>