1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    13.     <div id="app">
    14.         <div>
    15.             <label>
    16.                 id:<input type="text" v-model="id">
    17.             </label>
    18.             <label>
    19.                 name:<input type="text" v-model="name">
    20.             </label>
    21.             <label>
    22.                 <input type="button" value="添加" @click="add">
    23.             </label>
    24.             <label>
    25.                 <input type="text" v-model="keywords">
    26.                 <input type="button" value="搜索" @click="serach(keywords)">
    27.             </label>
    29.         </div>
    32.         <table border="1" style="margin-top: 20px;">
    33.             <thead>
    34.                 <tr>
    35.                     <th>id</th>
    36.                     <th>name</th>
    37.                     <th>ctime</th>
    38.                     <th>操作</th>
    39.                 </tr>
    40.             </thead>
    41.             <tbody>
    42.                 <tr v-for="(item, index) in serach(keywords)" :key="index">
    43.                     <td>{{item.id}}</td>
    44.                     <td>{{item.name}}</td>
    45.                     <td>{{item.ctime}}</td>
    46.                     <td><a href="" @click.prevent="del(item.id)">删除</a></td>
    47.                 </tr>
    48.             </tbody>
    50.         </table>
    51.     </div>
    52.     <script>
    53.         var vm = new Vue({
    54.             el: '#app',
    55.             data: {
    56.                 id: "",
    57.                 name: "",
    58.                 keywords:"",         
    59.                 list: [
    60.                     { id: 1, name: "奔驰", ctime: new Date() },
    61.                     { id: 2, name: "宝马", ctime: new Date() },
    62.                 ]
    63.             },
    64.             methods: {
    65.                 add(){
    66.                     var obj = { id:this.id,name:this.name,ctime:new Date()};
    67.                     this.list.push(obj);
    68.                     this.id='';
    69.                     this.name='';
    70.                 },
    71.                 del(id){
    72.                     // 根据id查找索引
    73.                     // 根据索引删除对应的对象
    75.                     // 方法二
    76.                     var index = this.list.findIndex(item => {
    77.                         if (item.id == id) {
    78.                             return true
    79.                         }
    80.                     })
    81.                     console.log(index)
    82.                     // this.list.splice(index, 1)
    85.                     // 方法一
    86.                     // 在数组some方法中,如果return true,就立刻终止这个数组的后续循环
    87.                     this.list.some((v, i) =>{
    88.                         if (v.id == id) {
    89.                             this.list.splice(i, 1)
    90.                             return true
    91.                         }
    92.                     })
    94.                 },
    98.                 serach(keywords) {
    99.                     // 第一种方法
    100.                      var newlist=[];
    101.                      this.list.forEach(item => {
    102.                         //  item.name.indexOf(keywords) != -1 名字包含就push到新数组中去
    103.                          if (item.name.indexOf(keywords) != -1) {
    104.                              newlist.push(item)
    105.                          }
    106.                      });
    107.                      return newlist
    109.                      // 第二种方法
    110.                     //  var newlist = this.list.filter(item=>{
    111.                     //      if (item.name.includes(keywords)) {
    112.                     //          return item
    113.                     //      }
    114.                     //  })
    115.                     //  return newlist
    116.                 }
    120.             }
    121.         });
    122.     </script>
    123. </body>
    125. </html>

    1.gif