Vue中的新增、刪除和搜尋
阿新 • • 發佈：2018-11-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> * { padding: 0; margin: 0; } h5,em,i,b { font-style: normal; font-weight: normal; } ul>li { list-style: none; } .top { width: 99%; border: 1px solid mediumblue; border-radius: 8px; overflow: hidden; font-size: 16px; text-indent: 20px; line-height: 30px; } input { width: 200px; margin: 15px 5px; height: 30px; vertical-align: middle; } input[type=button] { display: inline-block; width: 80px; height: 30px; background: #f40; color: #fff; border: none; outline: none; font-weight: 600; margin: 0 100px 0 20px; } .title { background: mediumblue; color: #fff; height: 40px; font-weight: 600; line-height: 40px; font-size: 16px; } .table { width: 99%; overflow: hidden; border: 1px solid red; border-radius: 6px; margin: 10px auto; text-align: center; } tr { height: 30px; } tr:nth-child(2n) { background: #ccc; } a { text-decoration: none; } </style> </head> <body> <div id="app"> <div class="top"> <h5 class="title">新增品牌</h5> ID:<input type="text" v-model="ids"> Name:<input type="text" v-model="names"> <input type="button" value="新增" @click="go"> 要搜尋的關鍵字：<input type="text" v-model="search"> </div> <table class="table"> <tr> <th>ID</th> <th>NAME</th> <th>TIME</th> <th>ORTHER</th> </tr> <tr v-for="item in look(search)" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.time}}</td> <td @click="re(item.id)"><a href="javascript:;">刪除</a></td> </tr> </table> </div> <script src="../vue/dist/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ ids:'', //ID框 names:'',//NAME框 search:'',//搜尋框 //列表物件 list:[ {id:1,name:'張三',time:Date()}, {id:2,name:'李四',time:Date()}, {id:3,name:'王五',time:Date()}, {id:4,name:'趙六',time:Date()}, ] }, methods:{ // 新增方法 go:function () { // 判斷輸入框是否為空 if(this.ids!=''&&this.names!=''){ var flag=true; var that=this // 迴圈判斷id是否已存在 this.list.forEach(function (item) { if(that.ids==item.id){ flag=false; alert('ID已重複'); return; } }) // 新增至列表中 if(flag){ this.list.push({id:this.ids,name:this.names,time:Date()}); this.ids=''; this.names=''; } }else{ alert('ID與NAME不能為空') } }, // 刪除 re:function (id) { var flag=confirm('是否刪除此Tip？'); var that=this; if(flag){ this.list.forEach(function (item,i) { if(id==item.id){ that.list.splice(i,1); return; } }) } }, // 查詢 look:function (search) { var newList=[]; var that=this; this.list.forEach(function (item) { if(item.name.indexOf(that.search)!=-1){ newList.push(item); } }) return newList; } } }) </script> </body> </html>