<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <script src="./js/jquery.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script> <script src="./vue-1.0.28.js"></script> </head> <body> <div class="container" id="box"> <form action="" role="form"> <div class="form-group"> <label for="user">用户名：</label> <input id="user" v-model="user" type="text" class="form-control"> </div> <div class="form-group"> <label for="age">年龄：</label> <input id="age" type="text" v-model="age" class="form-control"> </div> <div class="form-group"> <input type="button" value="add" v-on:click="add()" class="btn btn-primary"> <input type="reset" value="reset" class="btn btn-danger"> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="h2 text-info">信息表</caption> <tr class="text-danger"> <th class="text-center">序号</th> <th class="text-center">名字</th> <th class="text-center">年龄</th> <th class="text-center">操作</th> </tr> <tr class="text-center" v-for="val in userCon"> <td v-text="$index+1"></td> <td v-text="val.user"></td> <td v-text="val.age"></td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" v-on:click="nowIndex=$index" data-target="#delmodal">del</button> </td> </tr> <tr v-show="userCon.length!=0"> <td colspan="4"> <button class="pull-right btn btn-danger btn-sm" v-on:click="nowIndex='all'" data-toggle="modal" data-target="#delmodal">全部删除</button> </td> </tr> <tr v-show="userCon.length==0"> <td colspan="4" class="text-center text-muted"> 暂无数据 </td> </tr> </table> <!-- 模态框 --> <div class="modal" id="delmodal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 v-if="userCon[nowIndex].user">确认删除{{userCon[nowIndex].user=userCon[nowIndex].user?userCon[nowIndex].user:''}}的信息？</h3> <h3 v-else>确认删除所有的信息？</h3> </div> <div class="modal-body text-right"> <button type="button" data-dismiss="modal" class="btn btn-default" v-on:click="deluser(nowIndex)">确认</button> <button type="button" data-dismiss="modal" class="btn btn-danger">取消</button> </div> </div> </div> </div> </div> <script> new Vue({ el:"#box", data:{ user:'', age:'', nowIndex:-1, userCon:[ { user:"qiphon", age:26 } ] }, methods:{ add:function(){ this.userCon.push({ user:this.user, age:this.age }); this.user=""; this.age=""; }, deluser:function(a){ if(a=="all"){ this.userCon=[]; }else{ this.userCon.splice(a,1) } } } }) </script> </body> </html>
