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

Extjs学习笔记之五一个小细节renderTo和applyTo的区别

Jan 07 Javascript

js substr支持中文截取函数代码(中文是双字节)

Apr 17 Javascript

JavaScript中的apply和call函数详解

Jul 20 Javascript

jquery.validate提示错误信息位置方法

Jan 22 Javascript

Seajs 简易文档提供简单、极致的模块化开发体验

Apr 13 Javascript

分享javascript实现的冒泡排序代码并优化

Jun 05 Javascript

angularJS Provider、factory、service详解及实例代码

Sep 21 Javascript

webpack+vue中使用别名路径引用静态图片地址

Nov 20 Javascript

从setTimeout看js函数执行过程

Dec 19 Javascript

详解webpack loader和plugin编写

Oct 12 Javascript

nuxt踩坑之Vuex状态树的模块方式使用详解

Sep 06 Javascript

BootstrapValidator验证用户名已存在（ajax）

Nov 08 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程序中使用adodb连接不同数据库的代码实例

2015/12/19 PHP

php简单读取.vcf格式文件的方法示例

2017/09/02 PHP

doctype后如何获得body.clientHeight的方法

2007/07/11 Javascript

jquery BS,dialog控件自适应大小

2009/07/06 Javascript

用于节点操作的API，颠覆原生操作HTML DOM节点的API

2010/12/11 Javascript

同时使用n个window onload加载实例介绍

2013/04/25 Javascript

什么是MEAN?JavaScript编程中的MEAN是什么意思？

2014/12/18 Javascript

用svg制作富有动态的tooltip

2015/07/17 Javascript

JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

2016/08/23 Javascript

hammer.js实现图片手势放大效果

2017/08/29 Javascript

JavaScript实现短暂提示框功能

2018/04/04 Javascript

vue项目引入字体.ttf的方法

2018/09/28 Javascript

vue开发简单上传图片功能

2020/06/30 Javascript

[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2

2018/06/03 DOTA

Python中的集合类型知识讲解

2015/08/19 Python

python下如何查询CS反恐精英的服务器信息

2017/01/17 Python

python将字典内容存入mysql实例代码

2018/01/18 Python

详解Python if-elif-else知识点

2018/06/11 Python

python3调用百度翻译API实现实时翻译

2018/08/16 Python

python3.6+selenium实现操作Frame中的页面元素

2019/07/16 Python

Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)

2020/02/17 Python

Python找出列表中出现次数最多的元素三种方式

2020/02/24 Python

Python hashlib和hmac模块使用方法解析

2020/12/08 Python

Python lxml库的简单介绍及基本使用讲解

2020/12/22 Python

python读取图片颜色值并生成excel像素画的方法实例

2021/02/19 Python

日本著名的服饰鞋帽综合类购物网站：MAGASEEK

2019/01/09 全球购物

英国最大的独立玩具专卖店：The Entertainer

2019/09/06 全球购物

同步和异步有何异同，在什么情况下分别使用他们？

2012/12/28 面试题

Structs界面控制层技术

2013/10/11 面试题

车辆安全检查制度

2014/01/12 职场文书

投资建议书模板

2014/05/12 职场文书

2014年小学数学教师工作总结

2014/12/03 职场文书

向女朋友道歉的话

2015/01/20 职场文书

2015年技术工作总结范文

2015/04/20 职场文书

2016年大学生暑期社会实践方案

2015/11/26 职场文书

oracle重置序列从0开始递增1

2022/02/28 Oracle