一个简单的功能，实现用户的CDUR，用户表，有四个字段，id,name,age,salary.
<!DOCTYPE html>
<html> <head> <title>list.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <meta name="content-type" charset="UTF-8"> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> <style> td{ border:1px solid red; } </style> </head> <body> <div id="app"> <form id="demo"> 姓名：<input type="" v-model="addArr.name" /> 薪水：<input type="" v-model="addArr.salary" /> 年龄：<input type="" v-model="addArr.age"/> <a href="javascript:return false;" v-on:click='add()'>添加</a> <a href="javascript:return false;" v-on:click='update()'>更新</a> </form> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>收入</th> </tr> </thead> <tbody> <template v-for="todo in messages"> <tr> <td>{ { todo.id}}</td> <td>{ { todo.name}}</td> <td>{ { todo.age}}</td> <td>{ { todo.salary}}</td> <td v-on:click='del(todo.id)'>删除</td> <td v-on:click="load(todo.id)">修改</td> </tr> </template> </tbody> </div> <script>var vm = new Vue({ el: '#app', data: { messages:'', addArr:{id:'','name':'','salary':'','age':''},//新增的表单字段 addResult:'', }, mounted: function() { var self = this; console.log(this); this.$http.post('list.do').then(function(data){ self.messages =eval(data.body); }); }, methods:{ del:function(id){ var self = this; if(confirm("确定删除吗？")){ this.$http.post("del.do?id="+id).then(function(data){ console.log(eval(data.body)); if(eval(data.body) == 1){ alert("删除成功"); this.$http.post('list.do').then(function(data){ self.messages =eval(data.body); }); }else{ alert("删除失败"); } }); } }, add:function(){ var self = this; console.log(1); var addArr={ 'name':this.addArr.name, 'salary':this.addArr.salary, 'age':this.addArr.age, }; $.ajax({ type:"post", url:"add.do", data:vm.addArr, async:true, success:function(data){ if(data==1){ alert("添加成功"); self.$http.post('list.do').then(function(data){ self.messages =eval(data.body); }); self.resetStu(); }else{ alert("添加失败"); } } }); }, update:function(){ var self = this; var addArr={ 'id':this.addArr.id, 'name':this.addArr.name, 'salary':this.addArr.salary, 'age':this.addArr.age, }; if(confirm("确定修改吗？")){ $.ajax({ type:"post", url:"update.do", data:vm.addArr, async:true, success:function(data){ if(data==1){ alert("修改成功"); self.$http.post('list.do').then(function(data){ self.messages =eval(data.body); }); self.resetStu(); }else{ alert("修改失败"); } } }); } }, load:function(id){ var self = this; this.$http.post("load.do?id="+id).then(function(data){ var emp = eval("("+data.body+")") ; self.addArr ={ 'id':emp.id, 'name':emp.name, 'salary':emp.salary, 'age':emp.age, } }); }, //复位新增表单 resetStu:function(){ this.addArr={ 'name':'', 'salary':'', 'age':'' } } } }); </script> </body></html>