大家好，欢迎来到IT知识分享网。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload=function(){ var vm=new Vue({ el:'.container', data:{ arr:[], username:'', age:'', nowIndex:100, }, methods:{ add:function(){ this.arr.push({ name:this.username, age:this.age }); this.username='', this.ge='' }, delmsg:function(n){ this.arr.splice(n,1) } } }); } </script> </head> <body> <div class="container"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control"id="username" v-model="username" placeholder="请输入用户名"/> </div> <div class="form-group"> <label for="age">年龄:</label> <input type="text" class="form-control"id="age" v-model="age" placeholder="请输入用户名"/> </div> <div class="form-group"> <button type="button" class="btn btn-primary btn-sm" v-on:click="add()">添加</button> <button type="reset" class="btn btn-danger btn-sm">重置</button> </div> </form> <hr/> <table role="table" class="table table-bordered table-hover"> <tr class="text-center"> <th>序号</th> <th>用户名</th> <th>年龄</th> <th>操作</th> </tr> <tr v-for="(item,index) in arr"> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">删除</button></td> </tr> <tr v-show="arr.length==0"> <td colspan="4" class="text-center">暂无数据</td> </tr> </table> <!-- 模态框 --> <div role="dialog" class="modal fade" id="layer"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> <div class="modal-title">确定要删除么？</div> </div> <div class="modal-body text-right"> <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">取消</button> <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="delmsg(nowIndex)">确认</button> </div> </div> </div> </div> </div> </body></html>这里选中一行，进行删除，只是把当前的索引传递过来，传递到模态窗，模态窗的确认按钮，实现删除，把传递过来的索引传递到事件中，this.arr.splice(n,1)进行删除，切记，需要引入Jquery的js和bootstrap.js，这样模态窗的功能轻松实现
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/53670.html
