Vue.js 表格查询与更新
来源:互联网 发布:mfc socket编程实例 编辑:程序博客网 时间:2024/06/06 08:47
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); },
阅读全文
0 0
- Vue.js 表格查询与更新
- Vue.js 表格查询与更新
- Vue.js 表格查询与更新
- Vue.js+Layer表格数据绑定与实现更新
- Vue.js+Layer表格数据绑定与实现更新
- Vue.js+Layer表格数据绑定与实现更新
- vue.js中$set与数组更新
- 8.vue.js实例:Vue.js 表格
- Vue.js实现表格渲染
- vue.js 实现表格合并
- Vue.js 实现分页查询
- Vue.js进行查询操作
- vue.js 分页查询实例
- 基于Vue.js的表格分页组件
- Vue.js表格增加删除demo
- Vue.js实现可编辑的表格
- vue.js对表格的操作实例
- 表格展示与查询
- 20170609
- Numpy基础:数组、矢量计算以及ufunc通用函数使用
- 关于拦截器超时的使用
- 20170623:七周七数据分析,Excel篇
- Idea、Android Studio的git使用方法
- Vue.js 表格查询与更新
- linux常用命令
- 转:OBS-Studio MAC平台编译 --- 史上最全
- cordova混合式开发:实现头像裁切、本地缩放、上传,适用于android和ios
- Zookeeper简单介绍
- git 把远程分支拿到本地,并建立关联关系track
- Chrome 中的 JavaScript 断点设置和调试技巧
- C++设计模式六--SingletonPattern(单件模式)
- Vue.js 实现省市联动