效果
代碼實現
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" /> <style type="text/css"> .form-area { margin: 30px 0px; } </style> </head> <body> <div id="app"> <div class="container"> <h3>學員登記單</h3> <form class="form-area"> <div class="form-group"> <label for="exampleInputEmail1">姓名</label> <input type="email" v-model="name" class="form-control" id="exampleInputEmail1" placeholder="請輸入您的姓名"> </div> <div class="form-group"> <label for="exampleInputPassword1">學號</label> <input type="text" v-model="num" class="form-control" id="exampleInputPassword1" placeholder="請輸入您的學號"> </div> <div class="form-group"> <label for="exampleInputFile">手機號</label> <input type="text" v-model="phoneNum" id="exampleInputFile" class="form-control" placeholder="請輸入您的聯系方式"> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="isLive"> 是否住校 </label> </div> <div class="alert alert-danger" role="alert" v-show="infoShow">請把信息填寫完整</div> <button type="button" class="btn btn-success" @click="addData">添加</button> <button type="reset" class="btn btn-warning">重置</button> </form> <h3 class="text-center text-info">學員信息表</h3> <table class="table table-bordered table-striped"> <tr> <th>序號</th> <th>姓名</th> <th>學號</th> <th>手機號</th> <th>是否住校</th> <th>操作</th> </tr> <tr v-if="studentInfo.length>0" v-for="(item,index) in studentInfo"> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.num}}</td> <td>{{item.phoneNum}}</td> <td>{{item.isLive|changeStatus}}</td> <td> <button type="button" @click="del(item.num)" class="btn btn-primary" data-toggle="modal" data-target="#myModal">刪除</button> </td> </tr> <tr v-else> <td colspan="6" style="text-align: center;">暫無更多數據</td> </tr> </table> </div> <!-- 模態框 --> <!-- Small modal --> <div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">刪除操作</h4> </div> <div class="modal-body"> 你確定要刪除這條學生的記錄嗎? </div> <div class="modal-footer"> <button @click="cancle()" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button @click="certain()" type="button" class="btn btn-primary">確定</button> </div> </div> </div> </div> <!-- 模態框 --> </div> <script src="./js/jQuery.min.js" type="text/javascript" charset="utf-8"></script> <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="./js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm = new Vue({ el: "#app", data: { name: "", num: "", phoneNum: "", nowNum:"", isLive: false, infoShow: false, //是否顯示提示信息 studentInfo: [ {name:'朱麗玲',num:"1814030121",phoneNum:"18324853421",isLive:false}, {name:'周愛高',num:"1314030121",phoneNum:"18324853422",isLive:false}, {name:'朱麗玲1',num:"1414030121",phoneNum:"18324853421",isLive:true}, {name:'周愛高2',num:"1314130121",phoneNum:"18324853422",isLive:false} ], //學生信息列表 }, filters: { changeStatus(value) { return value ? '住校' : "不住校" } }, methods: { // 重置數據 setReset() { this.name = ""; this.num = ""; this.phoneNum = ""; this.isLive = false; }, // 添加數據 addData() { if (!this.name || !this.num || !this.phoneNum) { this.infoShow = true; setTimeout(() => { this.infoShow = false }, 2000) return false } else { let addInfo = { name: this.name, num: this.num, phoneNum: this.phoneNum, isLive: this.isLive }; this.studentInfo = [...this.studentInfo, addInfo] this.setReset(); console.log("輸出數據", this.studentInfo) } }, // 刪除 del(e) { this.nowNum=e; }, // 點擊確定按鈕 certain(){ // 根據學號刪除學員 this.studentInfo=this.studentInfo.filter((item,index)=>{ return item.num!=this.nowNum }) console.log(this.studentInfo) this.nowNum="" $('#myModal').modal('hide') }, cancle(){ this.nowNum="" } }, mounted() { } }) </script> </body> </html>