编程 Javascript

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

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动态控制样式属性（使用这种方法控制样式只是为了实现拖拽列表，一般并不这样控制样式）

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

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

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

- Author -

道之道编程路

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

通过DOM脚本去设置样式信息

Sep 19 Javascript

JS 去前后空格大全(IE9亲测)

Jul 15 Javascript

开发中可能会用到的jQuery小技巧

Mar 07 Javascript

18个非常棒的jQuery代码片段

Nov 02 Javascript

JS模拟按钮点击功能的方法

Dec 22 Javascript

Vue学习笔记之表单输入控件绑定

Sep 05 Javascript

JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析

Jul 26 Javascript

vue实现Excel文件的上传与下载功能的两种方式

Jun 28 Javascript

axios如何取消重复无用的请求详解

Dec 15 Javascript

Vue使用虚拟dom进行渲染view的方法

Dec 26 Javascript

JS数组方法reduce的用法实例分析

Mar 03 Javascript

三剑客：offset、client和scroll还傻傻分不清？

Dec 04 Javascript

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

用文本作数据处理

2006/10/09 PHP

destoon实现不同会员组公司名称显示不同的颜色的方法

2014/08/22 PHP

PHP发送AT指令实例代码

2016/05/26 PHP

PHP生成指定范围内的N个不重复的随机数

2019/03/18 PHP

javascript 时间比较实现代码

2009/10/28 Javascript

js模仿windows桌面图标排列算法具体实现(附图)

2013/06/16 Javascript

代码触发js事件(click、change)示例应用

2013/12/13 Javascript

javascript面向对象之定义成员方法实例分析

2015/01/13 Javascript

2016/03/10 Javascript

AngularJS中的缓存使用

2017/01/11 Javascript

微信小程序canvas写字板效果及实例

2017/06/15 Javascript

为什么使用koa2搭建微信第三方公众平台的原因

2018/05/16 Javascript

vue服务端渲染缓存应用详解

2018/09/12 Javascript

微信小程序实现下拉框功能

2019/07/16 Javascript

用pywin32实现windows模拟鼠标及键盘动作

2014/04/22 Python

Python 3.x读写csv文件中数字的方法示例

2017/08/29 Python

hmac模块生成加入了密钥的消息摘要详解

2018/01/11 Python

Python中反射和描述器总结

2018/09/23 Python

python实现归并排序算法

2018/11/22 Python

Python推导式简单示例【列表推导式、字典推导式与集合推导式】

2018/12/04 Python

python读取.mat文件的数据及实例代码

2019/07/12 Python

python实现飞行棋游戏

2020/02/05 Python

谈一谈数组拼接tf.concat()和np.concatenate()的区别

2020/02/07 Python

基于python生成英文版词云图代码实例

2020/05/16 Python

浅谈keras保存模型中的save()和save_weights()区别

2020/05/21 Python

利用三角函数在canvas上画虚线的方法

2018/01/11 HTML / CSS

介绍一下Java的事务处理

2012/12/07 面试题

《望洞庭》教学反思

2014/02/16 职场文书

校园安全演讲稿

2014/05/09 职场文书

个人查摆剖析材料

2014/10/04 职场文书

党员评议思想汇报

2014/10/08 职场文书

2015年高中生国庆节演讲稿

2015/07/30 职场文书

2016预备党员培训心得体会

2016/01/08 职场文书

MySQL开启事务的方式

2021/06/26 MySQL

python字典的元素访问实例详解

2021/07/21 Python

关于对TypeScript泛型参数的默认值理解

2022/07/15 Javascript