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

基于jquery的合并table相同单元格的插件(精简版)

Apr 05 Javascript

jQuery获取当前对象标签名称的方法

Feb 07 Javascript

js判断文本框剩余可输入字数的方法

Feb 04 Javascript

iframe里使用JavaScript控制主页转向的方法

Apr 03 Javascript

JavaScript判断前缀、后缀是否是空格的方法

Apr 15 Javascript

jQuery实现的AJAX简单弹出层效果代码

Nov 26 Javascript

js操作数组函数实例小结

Dec 10 Javascript

js中实现字符串和数组的相互转化详解

Jan 24 Javascript

微信小程序图片绝对定位(背景图片)

Apr 05 Javascript

jQuery 导航自动跟随滚动的实现代码

May 30 jQuery

JS字典Dictionary类定义与用法示例

Feb 01 Javascript

详解在Javascript中进行面向切面编程

Apr 28 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读取文件内容的三种可行方法示例介绍

2014/02/08 PHP

PHP 中魔术常量的实例详解

2017/10/26 PHP

Yii支持多域名cors原理的实现

2018/12/05 PHP

Laravel 修改默认日志文件名称和位置的例子

2019/10/17 PHP

查询绑定数据岛的表格中的文本并修改显示方式的js代码

2009/12/15 Javascript

jQuery 获取对象根据属性、内容匹配, 还有表单元素匹配

2010/05/31 Javascript

jQuery LigerUI 使用教程表格篇(1)

2012/01/18 Javascript

JavaScript自定义日期格式化函数详细解析

2014/01/14 Javascript

jQuery的animate函数实现图文切换动画效果

2015/05/03 Javascript

jquery+css3实现网页背景花瓣随机飘落特效

2015/08/17 Javascript

jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承

2016/12/06 Javascript

BootStrap整体框架之基础布局组件

2016/12/15 Javascript

jQuery实现复制到粘贴板功能

2017/02/11 Javascript

JS实现的抛物线运动效果示例

2018/01/30 Javascript

vue 子组件向父组件传值方法

2018/02/26 Javascript

vue实现短信验证码输入框

2020/04/17 Javascript

[00:20]DOTA2荣耀之路7：-ah fu-抢盾

2018/05/31 DOTA

python的几种开发工具介绍

2007/03/07 Python

使用Python的Twisted框架实现一个简单的服务器

2015/04/16 Python

解析Python中的异常处理

2015/04/28 Python

python递归删除指定目录及其所有内容的方法

2017/01/13 Python

Python 通过pip安装Django详细介绍

2017/04/28 Python

numpy中实现ndarray数组返回符合特定条件的索引方法

2018/04/17 Python

python实现播放音频和录音功能示例代码

2018/12/30 Python

python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例

2020/02/28 Python

Python如何根据时间序列数据作图

2020/05/12 Python

纯DOM+CSS3实现简单的小风车动画

2016/09/27 HTML / CSS

TUMI马来西亚官方网站：国际领先的高品质商旅箱包品牌

2018/04/26 全球购物

Stokke美国官方网店：高级儿童家具、推车、汽车座椅和配件

2020/06/06 全球购物

个人简历中的自我评价范例

2013/10/29 职场文书

超市营业员岗位职责

2013/12/20 职场文书

人力资源管理专业自荐信

2014/06/24 职场文书

秋季运动会广播稿（30篇）

2014/09/13 职场文书

欢迎新生标语

2014/10/06 职场文书

工作时间证明

2015/06/15 职场文书

python四个坐标点对图片区域最小外接矩形进行裁剪

2021/06/04 Python