基于vue.js的简单用户管理

功能描述：添加、修改、搜索过滤

效果图：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <title>简单用户管理</title>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>

 <body>
     <div id="app">
         <div class="panel panel-success">
             <div class="panel-heading">
                 <h3 class="panel-title">基于vue.js的简单用户管理</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>
                 <button class="btn btn-primary" @click="add()">Create</button>
                 <label>search:
                     <input type="text" class="form-control" v-model="keywords">
                 </label>
             </div>
         </div>

         <table class="table table-hover table-bordered table-striped">
             <thead>
                 <tr>
                     <th>id</th>
                     <th>name</th>
                     <th>time</th>
                     <th>Operation</th>
                 </tr>
             </thead>
             <tbody>
                 <tr v-for="list in search(keywords)" :key="list.id">
                     <td>{{list.id}}</td>
                     <td>{{list.name}}</td>
                     <td>{{list.time | dateFormat() }}</td>
                     <td>
                         <a href="" @click.prevent="del(list.id)">Delete</a>
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>
 </body>

 <script>

     // 全局的过滤器， 进行时间的格式化
     // 所谓的全局过滤器，就是所有的VM实例都共享的
     Vue.filter('dateFormat', function (dateStr, pattern = "") {
         // 根据给定的时间字符串，得到特定的时间
         var dt = new Date(dateStr)
         //   yyyy-mm-dd
         var y = dt.getFullYear()

         var d = dt.getDate()
         // 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}`
         }
     })

     new Vue({
         el: '#app',
         data: {
             id: "",
             name: "",
             keywords: "",
             lists: [
                 { id: , name: "Jacking", time: new Date() },
                 { id: , name: "zhangs", time: new Date() },
                 { id: , name: "bill", time: new Date() }
             ]
         },
         methods: {
             del(id) {
                 // this.lists.some((item, i) => {
                 //     if (item.id = id) {
                 //         this.lists.splice(i,1)
                 //         return true;
                 //     }
                 // })

                 var index = this.lists.findIndex(item => {
                     if (item.id == id) {
                         return true;
                     }
                 })
                 )
             },
             add() {
                 var flag = true;
                 this.lists.forEach(element => {
                     if (element.id == this.id) {
                         alert("该id已存在，请重新输入！");
                         flag = false;
                     }
                 });
                 if (!flag) {
                     this.id = ""
                     return false;
                 }
                 var list = { id: this.id, name: this.name, time: new Date() };
                 this.lists.push(list);
                 this.id = this.name = "";
             },
             // 过滤lists中的数据，返回一个新的数组
             search(keywords) {
                 var newList = [];
                 this.lists.forEach(element => {
                     ) {

                         newList.push(element);
                     }
                 });
                 return newList;

                 // return this.lists.filter(item => {
                 //     if (item.name.includes(keywords)) {
                 //         return item;
                 //     }
                 // })
             }
         },
         //过滤器为就近原则
         filters: {
             dateFormat: function (dateStr, pattern = '') {
                 // 根据给定的时间字符串，得到特定的时间
                 var dt = new Date(dateStr)
                 //   yyyy-mm-dd
                 var y = dt.getFullYear()
                 ).toString().padStart(, ')
                 , ')
                 if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                     return `${y}-${m}-${d}`
                 } else {
                     , ')
                     , ')
                     , ')
                     return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
                 }
             }
         }

     })

 </script>

 </html>