<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="./vue.js"></script> <script src="./vue.js"></script> <script src="../../plugins/jquery-1.9.1.min.js"></script> <script src="../../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <title>Vuejs2.0 demo</title> </head> <body > <div id="app"> <form action="" onsubmit="return false;" role="form"> <div class="form-group"> <label class="control-label" for="inputName">姓名:</label> <div class="controls"> <input type="text" id="inputName" placeholder="输入姓名" v-model="stu.name" class="form-control"> </div> </div> <div class="form-group"> <label class="control-label" for="inputAge">年龄:</label> <div class="controls"> <input type="text" id="inputAge" placeholder="输入年龄" v-model="stu.age" class="form-control"> </div> </div> <div class="control-group"> <button class="btn btn-small btn-primary" v-on:click="add();">添加</button> <button type="reset" class="btn btn-small btn-danger">重置</button> </div> </form> <table class="table table-striped table-bordered"> <caption class="h2 text-center">用户信息</caption> <tr><th>序号</th><th>姓名</th><th>年龄</th><th>操作</th></tr> <!--<tr> <td>1</td><td>lisi</td><td>20</td><td><button class="btn btn-small">删除</button></td> </tr> <tr> <td>2</td><td>lisi</td><td>30</td><td><button class="btn btn-small">删除</button></td> </tr>--> <tr v-for="(stu,index) in studata"> <td>{{index + 1}}</td><td>{{ stu.name }}</td><td>{{ stu.age }}</td><td><button class="btn btn-small" v-on:click="del(index);">删除</button></td> </tr> <tr v-show="studata.length!=0"> <td colspan="4" class="text-center"> <button class="btn btn-small btn-danger" v-on:click="delAll();">全部删除</button> </td> </tr> <tr v-show="studata.length==0"> <td colspan="4" class="text-center">暂无数据</td> </tr> </table> <!-- <div id="box"> <input type="text" v-model="msg"> <span>{{msg}}</span> </div>--> </div> <script> window.onload = function(){ new Vue({ el:"#app", data:{ msg:"用户信息表", studata:[], stu:{name:"",age:""} }, methods:{ add:function(){ //this.stu = {name:"lisi",age:"20"}; this.studata.push(this.stu); this.stu = {}; }, del:function(n){ this.studata.splice(n,1); }, delAll:function(){ this.studata = []; } } }); } </script> </body> </html>
