Vue.js 实现表格数据绑定
可以利用vue.js生命周期事件created加载完后为表格提供数据
var vm = new Vue({ el: "#table_content", data: { ulist: [] }, methods: { getdata: function (_keycontent) { //查询数据 //先把本地对象缓存下来 var self = this; $.get("GetUsersHandler.ashx", { keycontent: _keycontent, page: currentPage }, function (_result) { var jsobobj = JSON.parse(_result); self.ulist = jsobobj; }); } }, created: function () { //初始化事件里边去调用查询方法 this.getdata(""); } });
使用V-for解析数据
<tr v-for="uitem in ulist"> <td class="highlight"> <div class="success"></div> <a href="#">{{uitem.Id}}</a> </td> <td class="hidden-phone">{{uitem.UserName}}</td> <td> <span class="label label-success">{{uitem.Number}}</span> </td> <td style="width: 200px"> <a href="#" class="btn mini purple"><i class="icon-edit"></i>更新</a> <a href="#" class="btn mini black"><i class="icon-trash"></i>删除</a> <a href="#" class="btn mini blue"><i class="icon-share"></i>分享</a> </td> </tr> 效果：
Vue.js实现更新
其实只要点击更新按钮能够拿到值就好操作了
方法1：拿到更新按钮本身，在通过jquery去获取数据
<a href="#" class="btn mini purple" v-on:click="vupdate($event)"><i class="icon-edit"></i>更新</a>
methods: { vupdate: function (_my) { //***************获取数据的方法1，使用jquery获取***************** var needtr = $(_my.target).parent().parent(); console.log(_my.target); alert(needtr.find("td").eq(1).html()); alert(needtr.find("td").eq(2).html()); },
方法2：利用vue绑定的数据
点击更新按钮的时候把改行数据源直接传递到方法里边去
<a href="#" class="btn mini purple" v-on:click="vupdate(uitem)"><i class="icon-edit"></i>更新</a>
methods: { vupdate: function (uitem) { //***************获取数据的方法2，绑定的时候传递vue实例***************** console.log(uitem); alert(uitem.UserName); alert(uitem.Number); alert(uitem.Class); alert(uitem.Id); },
