编程 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 相关文章推荐

对联广告js flash激活

Oct 19 Javascript

javascript面向对象的方式实现的弹出层效果代码

Jan 28 Javascript

JS中类或对象的定义说明

Mar 10 Javascript

ExpressJS入门实例

Jan 14 Javascript

JavaScript中继承用法实例分析

May 16 Javascript

整理JavaScript创建对象的八种方法

Nov 03 Javascript

zTree异步加载展开第一级节点的实现方法

Sep 05 Javascript

JS去掉字符串末尾的标点符号及删除最后一个字符的方法

Oct 24 Javascript

Bootstrap栅格系统的使用详解

Oct 30 Javascript

react 创建单例组件的方法

Apr 26 Javascript

vue实现底部菜单功能

Jul 24 Javascript

微信小程序使用Vant Weapp组件库的方法步骤

Aug 01 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

PHP操作Postgresql封装类与应用完整实例

2018/04/24 PHP

JS操作Cookies包括(读取添加与删除)

2012/12/26 Javascript

ie6下png图片背景不透明的解决办法使用js实现

2013/01/11 Javascript

如何解决Jquery库及其他库之间的$命名冲突

2013/09/15 Javascript

5分钟理解JavaScript中this用法分享

2013/11/09 Javascript

jquery实现类似EasyUI的页面布局可改变左右的宽度

2020/09/12 Javascript

JavaScript提高性能知识点汇总

2016/01/15 Javascript

详解JavaScript表单验证（E-mail 验证）

2016/03/31 Javascript

jquery移除了live()、die(),新版事件绑定on()、off()的方法

2016/10/26 Javascript

清除js缓存的多种方法总结

2016/12/09 Javascript

bootstrap laydate日期组件使用详解

2017/01/04 Javascript

Node.js中用D3.js的方法示例

2017/01/16 Javascript

微信小程序template模板实例详解

2017/10/27 Javascript

vue checkbox 全选数据的绑定及获取和计算方法

2018/02/09 Javascript

vue使用监听实现全选反选功能

2018/07/06 Javascript

JS中的算法与数据结构之常见排序（Sort）算法详解

2019/08/16 Javascript

vue+moment实现倒计时效果

2019/08/26 Javascript

vue-dplayer 视频播放器实例代码

2019/11/08 Javascript

JavaScript ES 模块的使用

2020/11/12 Javascript

在Django的模板中使用认证数据的方法

2015/07/23 Python

python 全文检索引擎详解

2017/04/25 Python

shell命令行,一键创建 python 模板文件脚本方法

2018/03/20 Python

Django使用paginator插件实现翻页功能的实例

2018/10/24 Python

python实现五子棋游戏

2019/06/18 Python

python3.6环境安装+pip环境配置教程图文详解

2019/06/20 Python

python颜色随机生成器的实例代码

2020/01/10 Python

在Tensorflow中查看权重的实现

2020/01/24 Python

Python容器类型公共方法总结

2020/08/19 Python

印度低票价航空公司：GoAir

2017/10/11 全球购物

应届毕业生就业自荐信

2013/10/26 职场文书

护士毕业生自我鉴定

2014/02/08 职场文书

小学毕业感言50字

2014/02/16 职场文书

一份恶作剧的检讨书

2014/09/13 职场文书

总经理检讨书

2014/09/15 职场文书

2015年企业新年寄语

2014/12/08 职场文书

Nginx location 和 proxy_pass路径配置问题小结

2021/09/04 Servers