用vue写添加数据、删除数据、筛选数据表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="../libs/vue1026.js"></script> </head> <style> #app { width: 800px; margin: 20px auto; } #tb { width: 800px; border-collapse: collapse; margin: 20px auto; } #tb th { background-color: #0094ff; color: white; font-size: 16px; padding: 5px; text-align: center; border: 1px solid black; } #tb td { padding: 5px; text-align: center; border: 1px solid black; } </style> <body> <div id="app"> <input type="text" v-model="name"> <button @click="addData">添加数据</button><br> <input type="text" placeholder="请输入筛选内容" v-model="uname"> <table id="tb"> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> <tr v-if="list.length==0"> <td colspan="4">当前已经没有数据</td> </tr> <tr v-for="item in list | filterBy uname in 'name'"> <td>{{$index+1}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td><a href="javascript:;" @click="remove($index)">删除</a></td> </tr> </table> </div> </body> <script> new Vue({ el:'#app', data:{ list:[ {name:'宝马',ctime:new Date()}, {name:'奔驰',ctime:new Date()} ], name:'', uname:'' }, methods:{ addData:function(){ var str = {name:this.name,ctime:new Date()}; this.list.push(str); this.name=""; }, remove:function(id){ this.list.splice(id,1) } } }) </script> </html>