<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/lib/bootstrap.min.css"/> <script src="https://www.jb51.net/lib/jquery-1.7.2.js"></script> <script src="https://www.jb51.net/lib/bootstrap.js"></script> <script src="https://www.jb51.net/js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName : '', age : '', curIndex : -10 }, methods : { addUser : function(){ this.userList.push({ name : this.userName, age : this.age }); this.userName = ''; //添加完用户之后，把输入框的值清除 this.age = ''; }, deleteRow : function( n ){ this.userList.splice( n, 1 ); } } }); } </script> </head> <body> <div> <form role="form"> <div> <label for="username">用户名:</label> <input type="text" v-model="userName" placeholder="输入用户名"> </div> <div> <label for="age">年 龄:</label> <input type="text" v-model="age" placeholder="输入年龄"> </div> <div> <input type="button" v-on:click="addUser();" value="添加"> <input type="button" value="重置"> </div> </form> <hr> <table> <caption>用户信息表</caption> <tr> <th>序号</th> <th>名字</th> <th>年龄</th> <th>操作</th> </tr> <tr v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> <td> <button data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">删除</button> </td> </tr> <tr v-show="userList.length!=0"> <td colspan="4"> <button>删除全部</button> </td> </tr> <tr v-show="userList.length==0"> <td colspan="4"> <p>暂无数据....</p> </td> </tr> </table> <!--模态框 弹出框--> <div role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4>确认删除么?</h4> </div> <div> <button data-dismiss="modal">取消</button> <button data-dismiss="modal" v-on:click="deleteRow(curIndex);">确认</button> </div> </div> </div> </div> </div> </body> </html>
第七步、实现删除全部行
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/lib/bootstrap.min.css"/> <script src="https://www.jb51.net/lib/jquery-1.7.2.js"></script> <script src="https://www.jb51.net/lib/bootstrap.js"></script> <script src="https://www.jb51.net/js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName: '', age: '', curIndex: -10 }, methods: { addUser: function () { this.userList.push({ name: this.userName, age: this.age }); this.userName = ''; //添加完用户之后，把输入框的值清除 this.age = ''; }, deleteRow: function (n) { if (n == -1) { //当n=-1的时候,清空数组，就是删除全部 this.userList = []; } else { this.userList.splice(n, 1); } } } }); } </script> </head> <body> <div> <form role="form"> <div> <label for="username">用户名:</label> <input type="text" v-model="userName" placeholder="输入用户名"> </div> <div> <label for="age">年 龄:</label> <input type="text" v-model="age" placeholder="输入年龄"> </div> <div> <input type="button" v-on:click="addUser();" value="添加"> <input type="button" value="重置"> </div> </form> <hr> <table> <caption>用户信息表</caption> <tr> <th>序号</th> <th>名字</th> <th>年龄</th> <th>操作</th> </tr> <tr v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> <td> <button data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">删除 </button> </td> </tr> <tr v-show="userList.length!=0"> <td colspan="4"> <button v-on:click="curIndex=-1" data-toggle="modal" data-target="#layer"> 删除全部 </button> </td> </tr> <tr v-show="userList.length==0"> <td colspan="4"> <p>暂无数据....</p> </td> </tr> </table> <!--模态框 弹出框--> <div role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4>确认删除么?</h4> </div> <div> <button data-dismiss="modal">取消</button> <button data-dismiss="modal" v-on:click="deleteRow(curIndex);">确认 </button> </div> </div> </div> </div> </div> </body> </html>