Vue实现增加删除检索数据 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 10 </head>
 11 
 12 <body>
 13     <div id="app">
 14         id: <input type="text" v-model="id">
 15         name: <input type="text" v-model="name">
 16         <button @click='add'>添加</button>
 17         请输入关键字: <input type="text" v-model="keywords"><button @change='search'>检索</button>
 18         <table>
 19             <tr v-for="(item,index) in search()">
 20                 <td>{{item.id}}</td>
 21                 <td>{{item.name}}</td>
 22                 <td><a href="#" @click.prevent='del(item.id)'>删除</a></td>
 23             </tr>
 24         </table>
 25     </div>
 26     <script>
 27         var vm = new Vue({
 28             el: '#app',
 29             data: {
 30                 id: '',
 31                 name: '',
 32                 keywords: '',
 33                 list: [{
 34                         id: 1,
 35                         name: '宝马',
 36 
 37                     },
 38                     {
 39                         id: 2,
 40                         name: '凯迪拉克',
 41 
 42                     },
 43                     {
 44                         id: 3,
 45                         name: '白龙马',
 46 
 47                     },
 48                     {
 49                         id: 4,
 50                         name: '奥迪',
 51 
 52                     }
 53                 ]
 54             },
 55             methods: {
 56                 add() {
 57                     this.list.push({
 58                         id: this.id,
 59                         name: this.name
 60                     });
 61                     this.id = '';
 62                     this.name = '';
 63                 },
 64                 del(id) {
 65                     const index = this.list.findIndex(function (item, i, arr) {
 66                         return item.id == id;
 67                     });
 68                     this.list.splice(index, 1);
 69                 },
 70                 // search() {
 71                 //     let arr = [];
 72                 //     for (index in this.list) {
 73                 //         // if (this.list[index].name.indexOf(this.keywords) != -1) {
 74                 //         //     arr.push(this.list[index]);
 75                 //         // }
 76                 //         //另一种更简洁的方法
 77                 //         if (this.list[index].name.includes(this.keywords)) {
 78                 //             arr.push(this.list[index]);
 79                 //         }
 80                 //     }
 81                 //     return arr;
 82                 // }
 83 
 84                 //简易版本
 85                 // search() {
 86                 //     const arr = this.list.filter((item) => {
 87                 //         return item.name.includes(this.keywords);
 88                 //     });
 89                 //     return arr;
 90                 // }
 91                 //还可以再简化,一行搞定
 92                 search() {
 93                     return this.list.filter(item => item.name.includes(this.keywords));
 94                 }
 95             }
 96         });
 97     </script>
 98 </body>
 99 
100 </html>

 

posted @ 2020-07-30 23:23  youlj  阅读(373)  评论(0)    收藏  举报