微信小程序之数据双向绑定与数据操作


Posted in Javascript onMay 12, 2017

 微信小程序之数据双向绑定与数据操作

数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化,当然html部分数据发生变化js部分数据也会发生变化,从而使界面很方便的实现动态数据显示,一般拥有数据双向绑定的前端框架都为mvvm结构。数据双向绑定是个好东西,an1 an2 vue  也都有数据双向绑定的机制,而且基本都差不多,抄来抄去嘛!!下面以一个列表为例子来说下数据双向绑定及数据的操作。

1.把要进行数据双向绑定的属性放在page的data里,然后在html里使用{{属性名}}即可进行数据显示;

2.that.setData({ synctable:res.data.data.list  });  使用setData方法给synctable:res赋值并更新界面相应数据。

3.for(var i=0;that.data.synctable.length>i;i++){ that.data.synctable[i].top=i*40; }   使用 that.data.synctable取到data里的synctable值然后添加上top新字段,然后使用style="top:{{item.top}}px;"   即可在js动态控制样式属性(使用这种方法控制样式只是为了实现拖拽列表,一般并不这样控制样式)

微信小程序之数据双向绑定与数据操作

 微信小程序之数据双向绑定与数据操作

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
vue v-on监听事件详解
May 17 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
Flask中获取小程序Request数据的两种方法
May 12 #Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 #Javascript
微信小程序 支付功能实现PHP实例详解
May 12 #Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 #Javascript
JS实现图片预加载之无序预加载功能代码
May 12 #Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 #Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
May 12 #Javascript
You might like
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php数据序列化测试实例详解
2017/08/12 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
浅析vue-router原理
2018/10/19 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
python使用json序列化datetime类型实例解析
2018/02/11 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
临床医学应届生求职信
2013/11/06 职场文书
四年级科学教学反思
2014/02/10 职场文书
公司会计岗位职责
2014/02/13 职场文书
运动会通讯稿500字
2014/02/20 职场文书
骨干教师培训方案
2014/05/06 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
如何写辞职信
2015/05/13 职场文书
《分数乘法》教学反思
2016/02/24 职场文书