展示页面 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/vue/dist/vue.js"></script> <link rel="stylesheet" href="node_modules/bootstrap/css/bootstrap.css"/> <script src="node_modules/jquery/dist/jquery.js"></script> <style> table thead tr th { text-align:center; } </style> </head> <body> <div style="padding:20px;" id="app"> <div class="panel panel-primary"> <div class="panel-heading">用户管理</div> <table class="table table-bordered table-striped text-center"> <thead> <tr> <th>用户名</th> <th>年龄</th> <th>毕业学校</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody> <template v-for="(row, index) in rows"> <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize"> <td>{{row.Name}}</td> <td>{{row.Age}}</td> <td>{{row.School}}</td> <td>{{row.Remark}}</td> <td><a href="#" @click="Edit(row)">编辑</a> <a href="#" @click="Delete(row.Id)">删除</a></td> </tr> </template> <!-- 编辑input文本框 --> <tr> <td><input type="text" class="form-control" v-model="rowtemplate.Name"/></td> <td><input type="text" class="form-control" v-model="rowtemplate.Age"/></td> <td><select class="form-control" v-model="rowtemplate.School"> <option>美国加里敦大学</option> <option>美国菲林浩斯大学</option> <option>河北工程大学</option> <option>北京清华北大</option> </select></td> <td><input type="text" class="form-control" v-model="rowtemplate.Remark"/></td> <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td> </tr> </tbody> </table> </div> <nav style="float:right;"> <ul class="pagination pagination-lg"> <template v-for="page in Math.ceil(rows.length/pagesize)"> <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li> <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li> <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li> <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li> </template> </ul> </nav> </div> <!-- <script src="node_modules/jquery/dist/jquery.min.js"></script> --> <script> //Model数据模型 var data = { rows: [ {Id: 1, Name: '张浩', Age: 20, School: '美国加里敦大学', Remark: '三好学生'}, {Id: 2, Name: '张杰', Age: 18, School: '美国菲林浩斯大学', Remark: '三好学生'}, {Id: 3, Name: '武赛杰', Age: 23, School: '河北工程大学', Remark: '不老实的家伙'}, {Id: 4, Name: '妞妞', Age: 28, School: '北京清华北大', Remark: '我要跟你一起'}, {Id: 5, Name: '钞哥', Age: 22, School: '美国加里敦大学', Remark: '三好学生'}, {Id: 1, Name: '杨过', Age: 20, School: '美国菲林浩斯大', Remark: '三好学生'}, {Id: 2, Name: '小龙女', Age: 18, School: '美国加里敦大学', Remark: '三好学生'}, {Id: 3, Name: '欧阳锋', Age: 23, School: '河北工程大学', Remark: '不老实的家伙'}, {Id: 4, Name: '郭靖', Age: 28, School: '美国菲林浩斯大', Remark: '我要跟你一起'}, {Id: 5, Name: '黄蓉', Age: 22, School: '河北工程大学', Remark: '三好学生'}, ], pagesize: 4, curpage:1,//当前页的页码 rowtemplate: {Id: 0,Name: '',Age: '',School: '',Remark: ''} }; //ViewModel,创建Vue实例 var vue = new Vue({ //挂载 el: '#app', data: data, methods: { //上一页方法 PrePage: function (event) { $(".pagination .active").prev().trigger("click"); }, //下一页方法 NextPage: function (event) { $(".pagination .active").next().trigger("click"); }, //点击页码的方法 NumPage: function (num, event) { if(this.curpage == num){ return; } this.curpage = num; $(".pagination li").removeClass("active"); if(event.target.tagName.toUpperCase() == "LI") { $(event.target).addClass("active"); }else { $(event.target).parent().addClass("active"); } if(this.curpage == 1) { $("#prepage").addClass("disabled"); }else { $("#prepage").removeClass("disabled"); } if(this.curpage == Math.ceil(this.rows.length / this.pagesize)){ $("#nextpage").addClass("disabled"); }else { $("#nextpage").removeClass("disabled"); } }, //删除方法 Delete: function(id){ //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理 for(var i=0;i<this.rows.length;i++){ if(this.rows[i].Id == id) { this.rows.splice(i,1); break; } } }, //编辑 Edit: function (row){ this.rowtemplate = row; }, //添加 Save : function (event){ if(this.rowtemplate.Id == 0){ //设置当前新增行的Id this.rowtemplate.Id = this.rows.length +1; //放值添加 this.rows.push(this.rowtemplate); } //还原模板 this.rowtemplate = {Id: 0,Name: '',Age: '',School: '',Remark: ''} } } }); </script> </body> </html>