VUE.JS做的留言板
阿新 • • 發佈：2018-11-28
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div class="container" id="app"> <form role="form" > <div class="form-group"> <label for="username">使用者名稱</label> <input class="form-control" type="text" placeholder="請輸入姓名" id="username" v-model="username"/> </div> <div class="form-group"> <label for="age">年齡</label> <input class="form-control" type="text" placeholder="請輸入年齡" id="age" v-model="age"/> </div> <div class="form-group"> <input type="button" value="新增" class="btn btn-primary" v-on:click="add()"/> <input type="reset" value="重置" class="btn btn-danger" /> </div> <table class="table table-bordered table-hover"> <caption class="h2 text-center">使用者資訊表</caption> <thead> <tr> <th class="text-center">序號</th> <th class="text-center">姓名</th> <th class="text-center">年齡</th> <th class="text-center">操作</th> </tr> </thead> <tbody > <tr class="text-center" v-for="item in list"> <td>{{$index+1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td ><input type="button" value="刪除" class="btn btn-danger"id="show" v-on:click="sh()"></td> </tr> <tr > <td colspan="4" class="text-right text-muted" v-show="list.length!=0"> <input type="button" value="全部刪除" class="btn btn-danger" v-on:click="removall()"/> </td> </tr> <tr> <td colspan="4" class="text-center text-muted" v-show="list.length==0"> <p>暫時沒有資料...........</p> </td> </tr> </tbody> </table> </form> <div class="modal" id="modal-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">刪除</h3> </div> <div class="modal-body"> <div>確認要刪除嗎？</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="upHide()">關閉</button> <button class="btn btn-success" v-on:click="upHide()" type="submit">確定</button> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> <script> window.onload=function(){ new Vue({ el:"#app", data:{ list:[], username:"", age:"" }, methods:{ add:function(){ this.list.push({ name:this.username, age:this.age }) this.username=""; this.age=""; }, sh:function(){ $("#modal-1").show(); }, upHide:function($index){ $("#modal-1").hide(); this.list.splice($index,1) }, removall:function(){ this.list=[]; } } }); }; </script> </body> </html>