第四步、添加用户，点击添加按钮，把输入框中的数据作为一个对象 push 到数组userList，添加完之后，把userName, age清空，那么两个输入框的内容就会被清空
<!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 : '' } }); } </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" 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">删除</button> </td> </tr> <tr> <td colspan="4"> <button>删除全部</button> </td> </tr> <tr> <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">确认</button> </div> </div> </div> </div> </div> </body> </html>
第五步、结合数组的长度与v-show指令，实现提示信息的显示与隐藏
<!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 : '' }, methods : { addUser : function(){ this.userList.push({ name : this.userName, age : this.age }); this.userName = ''; //添加完用户之后，把输入框的值清除 this.age = ''; } } }); } </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">删除</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">确认</button> </div> </div> </div> </div> </div> </body> </html>
第六步、实现删除某行数据