Vue練習--table增刪改
阿新 • • 發佈:2018-10-31
帶資料儲存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="wrap"> <div class="container"> <table class="table table-bordered table-hover"> <tr> <td>學號</td> <td>姓名</td> <td>性別</td> <td>操作</td> </tr> <tr v-for="(item,index) in infoList"> <td>{{item.id}}</td> <td>{{item.username}}</td> <td>{{item.sex}}</td> <td> <button class="btn btn-danger" @click="dele(index)">刪除</button> <button class="btn btn-info" @click="alter(index)">修改</button> </td> </tr> <tr> <td colspan="4" class="text-center"><button class="btn btn-warning" type="button" @click="addshow">增加</button></td> </tr> </table> <hr /> <form v-if="isShow"> <h3>登記資訊</h3> <div class="form-group"> <input type="text" placeholder="請輸入id" class="form-control" v-model="id"/> </div> <div class="form-group"> <input type="text" placeholder="請輸入姓名" class="form-control" v-model="username"/> </div> <div class="form-group"> <input type="text" placeholder="請輸入性別" class="form-control" v-model="sex"/> </div> <div class="form-group"> <button class="btn btn-warning" type="button" @click="addInfo">增加</button> </div> </form> <form v-else> <h3>更改資訊</h3> <div class="form-group"> <input type="text" placeholder="請輸入id" class="form-control" v-model="oldid"/> </div> <div class="form-group"> <input type="text" placeholder="請輸入姓名" class="form-control" v-model="oldname"/> </div> <div class="form-group"> <input type="text" placeholder="請輸入性別" class="form-control" v-model="oldsex"/> </div> <div class="form-group"> <button class="btn btn-info" type="button" @click="updateInfo">更改</button> </div> </form> </div> </div> <script> var vm=new Vue({ el:"#wrap", data:{ // infoList:[ // {id:1,username:"王剛",sex:"男"}, // {id:2,username:"周遊",sex:"男"}, // {id:3,username:"金銘",sex:"女"} // ], infoList:JSON.parse(localStorage.getItem("newArr")) || [], id:"", username:"", sex:"", isShow:true, oldid:"", oldname:"", oldsex:"", selected:"" }, methods:{ addInfo:function(){ var obj={ id:this.id, username:this.username, sex:this.sex } for (var i=0;i<this.infoList.length;i++) { if(this.infoList[i].id == obj.id){ alert('有重複') return } } this.infoList.push(obj) localStorage.setItem("newArr",JSON.stringify(this.infoList)) this.id="" this.username="" this.sex="" }, dele:function(index){ this.infoList.splice(index,1) localStorage.setItem("newArr",JSON.stringify(this.infoList)) }, alter:function(index){ this.isShow=false this.oldid=this.infoList[index].id this.oldname=this.infoList[index].username this.oldsex=this.infoList[index].sex this.selected=this.infoList[index] }, addshow:function(){ this.isShow=true }, updateInfo:function(){ // console.log(this.selected) this.selected.id=this.oldid this.selected.username=this.oldname this.selected.sex=this.oldsex this.oldid="" this.oldname="" this.oldsex="" localStorage.setItem("newArr",JSON.stringify(this.infoList)) } } }) </script> </body> </html>