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.                 <!-- @keyup.enter="add" 松开键盘,并且按下回车就会触发add方法 -->
    20.                 name:<input type="text" v-model="name" @keyup.enter="add">
    21.             </label>
    22.             <label>
    23.                 <input type="button" value="添加" @click="add">
    24.             </label>
    25.             <label>
    26.                 <input type="text" v-model="keywords">
    27.                 <input type="button" value="搜索" @click="serach(keywords)">
    28.             </label>
    30.         </div>
    33.         <table border="1" style="margin-top: 20px;">
    34.             <thead>
    35.                 <tr>
    36.                     <th>id</th>
    37.                     <th>name</th>
    38.                     <th>ctime</th>
    39.                     <th>操作</th>
    40.                 </tr>
    41.             </thead>
    42.             <tbody>
    43.                 <tr v-for="(item, index) in serach(keywords)" :key="index">
    44.                     <td>{{item.id}}</td>
    45.                     <td>{{item.name}}</td>
    46.                     <td>{{item.ctime}}</td>
    47.                     <td><a href="" @click.prevent="del(item.id)">删除</a></td>
    48.                 </tr>
    49.             </tbody>
    51.         </table>
    52.     </div>
    53.     <script>
    55.         // 自定义全局键盘修饰符
    56.         Vue.config.keyCodes.f2= 113;
    58.         var vm = new Vue({
    59.             el: '#app',
    60.             data: {
    61.                 id: "",
    62.                 name: "",
    63.                 keywords: "",
    64.                 list: [
    65.                     { id: 1, name: "奔驰", ctime: new Date() },
    66.                     { id: 2, name: "宝马", ctime: new Date() },
    67.                 ]
    68.             },
    69.             methods: {
    70.                 add() {
    71.                     var obj = { id: this.id, name: this.name, ctime: new Date() };
    72.                     this.list.push(obj);
    73.                     this.id = '';
    74.                     this.name = '';
    75.                 },
    76.                 del(id) {
    77.                     // 根据id查找索引
    78.                     // 根据索引删除对应的对象
    80.                     // 方法二
    81.                     var index = this.list.findIndex(item => {
    82.                         if (item.id == id) {
    83.                             return true
    84.                         }
    85.                     })
    86.                     console.log(index)
    87.                     // this.list.splice(index, 1)
    90.                     // 方法一
    91.                     // 在数组some方法中,如果return true,就立刻终止这个数组的后续循环
    92.                     this.list.some((v, i) => {
    93.                         if (v.id == id) {
    94.                             this.list.splice(i, 1)
    95.                             return true
    96.                         }
    97.                     })
    99.                 },
    103.                 serach(keywords) {
    104.                     // 第一种方法
    105.                     var newlist = [];
    106.                     this.list.forEach(item => {
    107.                         //  item.name.indexOf(keywords) != -1 名字包含就push到新数组中去
    108.                         if (item.name.indexOf(keywords) != -1) {
    109.                             newlist.push(item)
    110.                         }
    111.                     });
    112.                     return newlist
    114.                     // 第二种方法
    115.                     //  var newlist = this.list.filter(item=>{
    116.                     //      if (item.name.includes(keywords)) {
    117.                     //          return item
    118.                     //      }
    119.                     //  })
    120.                     //  return newlist
    121.                 }
    125.             }
    126.         });
    127.     </script>
    128. </body>
    130. </html>

    1.gif