vue学习（3）-增删改查

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

     <script src="js/jquery/2.0.0/jquery.min.js"></script>

     <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">

     <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

 </head>

 <body>

 <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="添加" @click="add" class="btn btn-primary">

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

         <!--如果要查找的话，数组名就不能写死-->

         <tr v-for="item in search(keywords)" :key="item.id">

             <td>{{ item.id }}</td>

             <td>{{ item.name }}</td>

             <!--传空字符串,不能不传-->

             <td>{{ item.ctime | dateFormat('') }}</td>

             <td>

                 <!-- .prevent 阻止默认行为，防止刷新-->

                 <a href="" @click.prevent="del(item.id)">删除</a>

             </td>

         </tr>

         </tbody>

     </table>

 </div>

 <div id="app2">

     <p>{{ dt | dateFormat('') }}</p>

 </div>

 <script>

     // 全局过滤器

     Vue.filter('dateFormat', function (dateStr,pattern) {

         var dt = new Date(dateStr);

         var y = dt.getFullYear();

         var m = dt.getMonth() + 1;

         var d = dt.getDate();

         // return `${y}-${m}-${d}`;

         // return dt.toLocaleDateString();

         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}`;

         }

     });

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

         el: '#app',

         data: {

             id:'',

             name:'',

             keywords:'',//搜索的关键词

             list:[

                 {id: 1, name:'benz', ctime: new Date()},

                 {id: 2, name:'baoma', ctime: new Date()}

             ]

         },

         methods: {

             add() {

                 var car = { id: this.id, name: this.name,ctime: new Date()};

                 this.list.push(car);

             },

             del(id) {

                 this.list.some((item, i) => {

                     if (item.id === id){

                         this.list.splice(i, 1);

                         //在数组 some 方法中，只要return true，就会立即终止这个数组的后续循环

                         return ture;

                     }

                 })

             },

             search(keywords) {

                 // var newList = [];

                 // this.list.forEach(item => {

                 //如果查找不到就返回-1

                 //查找的为空，就返回 0

                 //     if (item.name.indexOf(keywords) != -1){

                 //         newList.push(item);

                 //     }

                 // });

                 // return newList

             //    forEach some filter findIndex 数组遍历的方法

                 return newList = this.list.filter(item => {

                     //String.prototype.includes('要包含的字符串')

                     //如果包含 返回true

                     //jQuery中有个方法$("p:contain(is)")类似

                     if (item.name.includes(keywords)){

                         return item;

                     }

                 })

             }

         }

     });

     //定义私有的过滤器

     var vm2 = new Vue({

         el: '#app2',

         data: {

             dt:new Date()

         },

         methods: {

         },

         //过滤器，方法都是对象

         //过滤器调用采用就近原则，如果全局和私有的名称一致了，优先调用私有的过滤器

         filters: {

             dateFormat: function (dateStr, pattern = '') {

                 var dt = new Date(dateStr);

                 var y = dt.getFullYear();

                 var m = dt.getMonth() + 1;

                 var d = dt.getDate();

                 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}`;

                 }

             }

         }

     })

 </script>

 </body>

 </html>
按关键词查找：
巴特西

vue学习（3）-增删改查

最新文章

热门文章
